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

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

### 1.4 打包个应用

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

#### 1.4.1 项目初始化

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

```bash
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）。

```bash
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`的文件，并添加以下基本配置：

```javascript
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样式和图片资源的简单页面。

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

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

```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`文件。

```html
<!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>
  
</body>
</html>
```

#### 1.4.5 打包应用

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

```bash
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的更多功能，如代码分割、懒加载、环境变量配置等，以期达到更高效的构建和更优秀的项目表现。

该分类下的相关小册推荐：

webpack指南

Webpack零基础入门

Webpack实战：入门、进阶与调优(中)

全解webpack前端开发环境定制

Webpack实战：入门、进阶与调优(下)