6.2.3 设置提取规则-Webpack实战：入门、进阶与调优(中)

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

### 6.2.3 设置提取规则

在Webpack的配置中，设置提取规则（Extraction Rules）是一个关键步骤，它直接影响到最终构建产物的性能、体积以及加载效率。特别是在处理CSS、图片、字体等静态资源时，合理地配置提取规则可以显著提升应用的加载速度和用户体验。本章节将深入探讨如何在Webpack中设置这些提取规则，重点讲解CSS的提取、图片和字体的处理策略，并介绍如何通过插件来优化这些过程。

#### 6.2.3.1 为什么要设置提取规则

在Webpack的默认配置中，所有资源（包括CSS、图片等）通常都会被打包进主JavaScript文件中，以模块的形式存在。这种做法虽然简化了依赖管理，但会导致几个问题：

1. **性能问题**：当JavaScript文件体积过大时，会延长浏览器的解析和执行时间，影响页面加载速度。
2. **缓存失效**：CSS或图片等资源的变更可能导致整个JavaScript文件缓存失效，需要重新下载整个文件，即使只有小部分资源发生了变化。
3. **并行加载受限**：由于所有资源都打包在一个文件中，浏览器无法并行下载多个文件，从而限制了资源的加载速度。

因此，通过设置提取规则，将CSS、图片等资源从主JavaScript文件中分离出来，可以实现资源的并行加载、提高缓存利用率，并减少主文件的体积，是提升应用性能的重要手段。

#### 6.2.3.2 CSS的提取

CSS的提取是Webpack配置中最常见的需求之一。通常，我们会使用`mini-css-extract-plugin`（在Webpack 4+中替代了`extract-text-webpack-plugin`）来实现CSS的单独打包。

**安装插件**

首先，你需要安装`mini-css-extract-plugin`和相关的CSS加载器（如`css-loader`、`postcss-loader`、`sass-loader`等）：

```bash
npm install mini-css-extract-plugin css-loader postcss-loader sass-loader sass --save-dev
```

**配置Webpack**

然后，在Webpack配置文件中，你需要引入`MiniCssExtractPlugin`，并在`module.rules`中配置CSS文件的处理规则，将`style-loader`替换为`MiniCssExtractPlugin.loader`：

```javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, // 替换style-loader
          'css-loader',
          'postcss-loader' // 如果使用PostCSS
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
      // ... 其他文件类型规则
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css', // 生成的文件名
      chunkFilename: '[id].[contenthash].css', // 非入口(non-entry) chunk 的文件名
    }),
    // ... 其他插件
  ],
  // ...
};
```

这样配置后，Webpack会将CSS文件从主JavaScript文件中提取出来，生成独立的CSS文件，并通过`<link>`标签引入HTML中。

#### 6.2.3.3 图片和字体的处理

对于图片和字体文件，Webpack默认并不会直接处理它们，而是通过`file-loader`或`url-loader`等加载器来管理。`file-loader`会将文件发送到输出目录，并返回（相对）URL；而`url-loader`类似于`file-loader`，但在文件大小小于限制时，可以将文件作为Base64编码的URL返回，以减少HTTP请求。

**安装加载器**

```bash
npm install file-loader url-loader --save-dev
```

**配置Webpack**

在Webpack配置中，你可以为图片和字体文件设置不同的加载规则：

```javascript
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource', // Webpack 5推荐使用asset模块类型，替代file-loader
        generator: {
          filename: 'images/[name].[hash:8].[ext]',
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash:8].[ext]',
        },
      },
      // 如果仍使用Webpack 4及以下版本，则使用如下配置
      // {
      //   test: /\.(png|svg|jpg|jpeg|gif)$/i,
      //   use: [
      //     {
      //       loader: 'url-loader',
      //       options: {
      //         limit: 8192, // 小于8KB的图片转为base64
      //         name: 'images/[name].[hash:8].[ext]',
      //       },
      //     },
      //   ],
      // },
      // {
      //   // 字体文件配置类似
      // },
      // ...
    ],
  },
  // ...
};
```

注意：在Webpack 5中，`asset/resource`模块类型提供了一种更简洁的方式来处理资源文件，而无需显式安装和使用`file-loader`或`url-loader`。

#### 6.2.3.4 进一步优化

- **缓存组（SplitChunks）**：Webpack的`optimization.splitChunks`配置允许你控制如何分割代码块（chunks）。通过合理配置，可以进一步减少重复代码，提高缓存效率。
- **代码压缩**：使用`TerserPlugin`（JavaScript）和`css-minimizer-webpack-plugin`（CSS）等插件对代码和样式进行压缩，以减少文件体积。
- **环境变量**：根据开发环境和生产环境的不同，通过`DefinePlugin`定义不同的环境变量，以启用或禁用某些特性，如代码映射（source maps）和压缩。
- **懒加载（Lazy Loading）**：对于非首屏必需的资源，使用Webpack的动态导入（dynamic imports）功能实现懒加载，以加快首屏加载速度。

#### 6.2.3.5 小结

通过本章节的学习，我们深入了解了在Webpack中设置提取规则的重要性以及具体实现方法。从CSS的提取到图片、字体的处理，再到进一步的优化策略，每一步都旨在提升应用的性能和用户体验。合理地配置Webpack的提取规则，是实现高效、可维护前端项目的重要基石。希望这些内容能对你的Webpack实战之路提供有力支持。

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

全解webpack前端开发环境定制

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

webpack指南

Webpack零基础入门

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