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

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

6.2.3 设置提取规则

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

6.2.3.1 为什么要设置提取规则

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

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

因此，通过设置提取规则，将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等）：

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：

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请求。

安装加载器

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

配置Webpack

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

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实战之路提供有力支持。