1.4 打包个应用-Webpack实战：入门、进阶与调优(上)

当前位置:　首页>> 技术小册>> Webpack实战：入门、进阶与调优(上)

1.4 打包个应用

在深入Webpack的世界后，我们已经掌握了Webpack的基本概念、安装配置以及如何通过配置文件（通常是webpack.config.js）来定制构建过程。接下来，让我们将理论知识付诸实践，通过动手打包一个简单的Web应用来巩固所学。这一过程不仅能帮助我们更直观地理解Webpack的工作方式，还能为后续的进阶与调优打下坚实的基础。

1.4.1 项目初始化

首先，我们需要创建一个新的项目文件夹并初始化一个新的Node.js项目。打开终端（或命令提示符），执行以下命令：

mkdir webpack-demo
cd webpack-demo
npm init -y

这里，mkdir webpack-demo用于创建一个名为webpack-demo的新文件夹，cd webpack-demo切换到该文件夹内，npm init -y则快速生成一个默认的package.json文件，该文件是Node.js项目的核心文件，用于管理项目的依赖、脚本等。

1.4.2 安装Webpack及相关依赖

接下来，我们需要安装Webpack及其命令行接口（CLI），以便能够在项目中直接使用Webpack命令。此外，由于Webpack默认只能处理JavaScript文件，为了处理CSS、图片等其他资源，我们还需要安装一些加载器（loader）。

npm install --save-dev webpack webpack-cli style-loader css-loader file-loader html-webpack-plugin

这里安装的依赖说明如下：

webpack和webpack-cli：Webpack核心库及其命令行工具。
style-loader和css-loader：用于处理CSS文件的加载器。style-loader将JS字符串生成为style节点，而css-loader解析@import和url()，并将它们处理为require()调用。
file-loader：处理文件并将其移动到输出目录，同时可以指定文件名和生成hash。
html-webpack-plugin：这个插件简化了HTML文件的创建，以便为你的webpack包提供服务。它对于在文件名中包含每次构建的唯一hash值的资源特别有用。

1.4.3 配置Webpack

在项目根目录下创建一个名为webpack.config.js的文件，并添加以下基本配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: __dirname + '/dist', // 打包后的文件存放的目录
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配文件正则表达式
        use: ['style-loader', 'css-loader'], // 使用的加载器，顺序从右到左
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext][contenthash]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // HTML模板文件
      filename: 'index.html' // 输出的HTML文件名
    })
  ],
  mode: 'development' // 开发模式
};

这个配置文件定义了Webpack的入口文件、输出配置、模块加载规则以及使用的插件。其中，entry指定了Webpack的入口文件，output定义了打包后文件的名称和存放路径，module.rules定义了如何处理不同类型的文件，plugins则允许我们执行范围更广的任务，如生成HTML文件。

1.4.4 创建项目结构

接下来，根据项目需求，我们创建一个简单的项目结构。假设我们要开发一个包含CSS样式和图片资源的简单页面。

webpack-demo/
│
├── /dist     # Webpack打包后生成的文件目录
│
├── /src      # 源码目录
│   ├── index.js
│   ├── index.html
│   ├── styles.css
│   └── logo.png
│
├── package.json
├── webpack.config.js
└── ...

在src/index.js中，我们可以引入CSS文件和图片资源，并编写一些简单的JavaScript代码：

import './styles.css'; // 引入CSS文件
function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello, Webpack!';
  element.classList.add('hello');
  // 假设我们想在页面上显示一张图片
  const img = new Image();
  img.src = require('./logo.png'); // Webpack会处理这个require调用
  img.alt = 'Logo';
  element.appendChild(img);
  return element;
}
document.body.appendChild(component());

在src/index.html中，我们保留一个基本的HTML结构，Webpack将通过html-webpack-plugin自动注入打包后的bundle.js文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Demo</title>
</head>
<body>
  <!-- 插件会自动注入bundle.js -->
</body>
</html>

1.4.5 打包应用

一切准备就绪后，我们就可以使用Webpack来打包我们的应用了。在项目根目录下打开终端，执行以下命令：

npx webpack --mode development

这里，--mode development指定了Webpack的运行模式为开发模式，这会让Webpack启用一些在开发过程中很有用的特性，比如详细的错误信息和更快的构建速度。执行命令后，Webpack会根据webpack.config.js中的配置，处理src目录下的文件，并将打包后的文件输出到dist目录。

1.4.6 查看结果

打开dist/index.html文件，你应该能看到页面上显示了“Hello, Webpack!”的文字，并且旁边有一张图片。这表明Webpack已经成功地将你的JavaScript、CSS和图片资源打包并整合到了一个HTML文件中。

总结

通过这一章的学习，我们不仅了解了如何初始化一个Webpack项目，安装必要的依赖，配置Webpack以处理不同类型的文件，还亲手打包了一个简单的Web应用。这个过程不仅加深了对Webpack工作原理的理解，也为后续深入学习和应用Webpack的高级特性打下了坚实的基础。在后续章节中，我们将继续探索Webpack的更多功能，如代码分割、懒加载、环境变量配置等，以期达到更高效的构建和更优秀的项目表现。