阐述 Vue CLI 如何通过 `chainWebpack` 和 `configureWebpack` 提供强大的 Webpack 配置定制能力，并解释其底层原理。-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41455464/article/details/149864319

Vue CLI Webpack 配置定制：ChainWebpack 与 ConfigureWebpack 讲座

各位观众老爷，大家好！我是今天的主讲人，江湖人称“Webpack 救星”（其实是加班太多被迫研究的）。今天我们要聊聊 Vue CLI 提供的两大利器：chainWebpack 和 configureWebpack，它们是如何让我们可以像开盲盒一样，定制 Webpack 配置，打造属于你自己的专属打包流程。

首先，我们得明白，Vue CLI 已经帮我们配置好了一套默认的 Webpack 配置，开箱即用，但总有一些时候，我们需要打破常规，做出一些个性化的调整。这时候，chainWebpack 和 configureWebpack 就闪亮登场了。

一、为何需要定制 Webpack？

在深入探讨 chainWebpack 和 configureWebpack 之前，我们先来简单聊聊为什么要定制 Webpack 配置。毕竟，如果默认配置能满足所有需求，那我们也不用这么折腾了，对吧？

以下是一些常见的需要定制 Webpack 的场景：

优化构建性能： 默认配置可能不是针对你的项目进行优化的，例如，你可以通过配置来减少打包体积、提升构建速度等。
集成第三方库： 有些第三方库可能需要特定的 Webpack 配置才能正常工作，例如，一些需要自定义 Loader 的库。
支持新特性： 想要使用一些实验性的 JavaScript 特性，或者一些新的 CSS 预处理器，可能需要手动配置 Webpack。
个性化需求： 比如你想把静态资源放到 CDN 上，或者你想自定义输出目录的结构等等。

总之，定制 Webpack 配置是为了让我们的项目更好地运行，更高效地构建，更符合我们的需求。

二、chainWebpack：链式操作，优雅修改

chainWebpack 提供了一种更精细、更优雅的方式来修改 Webpack 配置。它允许我们通过一个链式 API 来访问和修改 Webpack 配置的各个方面，而无需直接操作原始的配置对象。

2.1 基本用法

在 vue.config.js 文件中，我们可以这样使用 chainWebpack：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 修改配置...
  }
};

这里的 config 对象是一个 webpack-chain 的实例，它提供了一系列的链式 API 来操作 Webpack 配置。

2.2 核心概念：webpack-chain

webpack-chain 库是 chainWebpack 的基石。它提供了一套链式 API，让我们能够以更加声明式的方式来修改 Webpack 配置。使用 webpack-chain 的好处在于：

可读性强： 链式 API 使得配置更加易于阅读和理解。
类型安全： webpack-chain 提供了类型定义，可以帮助我们避免一些常见的配置错误。
易于维护： 当 Webpack 版本升级时，webpack-chain 可以帮助我们更容易地迁移配置。

2.3 常用 API 举例

让我们来看一些 chainWebpack 中常用的 API 示例：

修改 Loader 配置：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改 vue-loader 的选项
          options.compilerOptions = {
            whitespace: 'condense' // 压缩空白字符
          };
          return options;
        });
  }
};

这段代码修改了 vue-loader 的配置，通过 tap 方法可以访问到 Loader 的选项，并进行修改。

添加新的 Loader：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .test(/.svg$/)
      .use('file-loader')
        .loader('file-loader');
  }
};

这段代码添加了一个新的 Loader，用于处理 SVG 文件。

修改 Plugin 配置：

// vue.config.js
const webpack = require('webpack');

module.exports = {
  chainWebpack: config => {
    config
      .plugin('define')
      .use(webpack.DefinePlugin, [{
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }]);
  }
};

这段代码修改了 DefinePlugin 的配置，use 方法接收两个参数：Plugin 的构造函数和构造函数的参数。

删除 Plugin：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugins.delete('prefetch'); // 删除 prefetch 插件
  }
};

这段代码删除了 prefetch 插件。

设置别名：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('@', resolve('src')); // 设置 @ 别名
  }
};

这段代码设置了 @ 别名，指向 src 目录。

2.4 chainWebpack 的底层原理

chainWebpack 的底层原理其实并不复杂。它本质上是利用 webpack-chain 库，构建了一个 Webpack 配置的抽象层。这个抽象层允许我们通过链式 API 来修改配置，而无需直接操作原始的 Webpack 配置对象。

当我们使用 chainWebpack 修改配置时，webpack-chain 会将我们的修改转换成一系列的操作指令。然后，在 Webpack 构建之前，Vue CLI 会执行这些操作指令，将它们应用到原始的 Webpack 配置对象上。

三、configureWebpack：灵活配置，直接操作

configureWebpack 提供了另一种定制 Webpack 配置的方式。它允许我们直接操作原始的 Webpack 配置对象，或者返回一个包含配置选项的对象。相比于 chainWebpack，configureWebpack 更加灵活，但也意味着我们需要更加了解 Webpack 的配置结构。

3.1 基本用法

在 vue.config.js 文件中，我们可以这样使用 configureWebpack：

// vue.config.js
module.exports = {
  configureWebpack: {
    // 修改配置...
  }
};

// 或者

module.exports = {
  configureWebpack: (config) => {
    // 修改配置...
  }
};

configureWebpack 可以接收一个对象或一个函数作为参数。如果传入的是一个对象，那么这个对象会被合并到最终的 Webpack 配置中。如果传入的是一个函数，那么这个函数会接收原始的 Webpack 配置对象作为参数，我们可以在函数中直接修改这个对象。

3.2 常用用法举例

添加 Plugin：

// vue.config.js
const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.IgnorePlugin(/^./locale$/, /moment$/) // 忽略 moment 的 locale 文件
    ]
  }
};

这段代码添加了一个 IgnorePlugin，用于忽略 moment 的 locale 文件，以减少打包体积。

修改 output 配置：

// vue.config.js
module.exports = {
  configureWebpack: {
    output: {
      filename: '[name].[hash].js', // 修改输出文件名
      publicPath: '/static/' // 修改 publicPath
    }
  }
};

这段代码修改了 output 配置，包括输出文件名和 publicPath。

使用函数形式：

// vue.config.js
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true; // 去除 console.log
    } else {
      // 开发环境
      // ...
    }
  }
};

这段代码使用函数形式，根据不同的环境来修改 Webpack 配置。在生产环境下，它会去除 console.log 语句。

3.3 configureWebpack 的底层原理

configureWebpack 的底层原理相对简单。如果 configureWebpack 传入的是一个对象，那么 Vue CLI 会使用 webpack-merge 库，将这个对象合并到原始的 Webpack 配置中。如果 configureWebpack 传入的是一个函数，那么 Vue CLI 会直接调用这个函数，并将原始的 Webpack 配置对象作为参数传递给它。

四、chainWebpack vs configureWebpack：如何选择？

chainWebpack 和 configureWebpack 都是用于定制 Webpack 配置的，但它们的使用场景和适用性有所不同。那么，我们应该如何选择呢？

特性	`chainWebpack`	`configureWebpack`
修改方式	链式 API，声明式修改	直接操作对象，命令式修改
灵活性	较低	较高
可读性	较好	较差
易维护性	较好，Webpack 版本升级影响较小	较差，Webpack 版本升级可能导致配置失效
适用场景	修改已有的 Loader、Plugin 配置，添加新的 Loader	需要进行复杂的配置修改，或者需要直接访问 Webpack 对象

总的来说：

推荐使用 chainWebpack： 如果你的目标是修改已有的 Loader、Plugin 配置，或者添加新的 Loader，那么 chainWebpack 是更好的选择。它提供了更加清晰、易于维护的方式来修改配置。
谨慎使用 configureWebpack： 只有当你需要进行非常复杂的配置修改，或者需要直接访问 Webpack 对象时，才应该考虑使用 configureWebpack。在使用 configureWebpack 时，需要对 Webpack 的配置结构有深入的了解，并且要小心处理 Webpack 版本升级带来的影响。

五、实战演练：优化构建性能

为了更好地理解 chainWebpack 和 configureWebpack 的使用，我们来做一个实战演练：优化构建性能。

5.1 使用 webpack-bundle-analyzer 分析打包体积

首先，我们需要安装 webpack-bundle-analyzer 插件：

npm install --save-dev webpack-bundle-analyzer

然后，在 vue.config.js 中配置 webpack-bundle-analyzer：

// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  }
};

运行 npm run build 命令，webpack-bundle-analyzer 会自动打开一个网页，显示各个模块的打包体积。通过分析打包体积，我们可以找到需要优化的模块。

5.2 使用 externals 减少打包体积

如果你的项目使用了大量的第三方库，那么可以考虑使用 externals 配置，将这些库排除在打包范围之外，从而减少打包体积。

例如，如果你的项目使用了 lodash 库，你可以这样配置：

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      lodash: 'lodash'
    }
  }
};

然后在 HTML 文件中，通过 CDN 引入 lodash 库：

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

5.3 使用 terser-webpack-plugin 压缩代码

terser-webpack-plugin 是一个用于压缩 JavaScript 代码的 Webpack 插件。Vue CLI 已经默认集成了 terser-webpack-plugin，我们只需要修改它的配置即可。

// vue.config.js
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true; // 去除 console.log
    }
  }
};

这段代码在生产环境下，去除了 console.log 语句。

5.4 使用 compression-webpack-plugin 压缩静态资源

compression-webpack-plugin 可以将静态资源压缩成 Gzip 或 Brotli 格式，以减少文件大小，提升加载速度。

首先，我们需要安装 compression-webpack-plugin 插件：

npm install --save-dev compression-webpack-plugin

然后，在 vue.config.js 中配置 compression-webpack-plugin：

// vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip', // 使用 gzip 压缩
        test: /.(js|css|html|svg)$/, // 匹配需要压缩的文件
        threshold: 10240, // 超过 10kb 的文件才压缩
        minRatio: 0.8, // 压缩比例超过 0.8 才压缩
        deleteOriginalAssets: false // 是否删除原始资源
      })
    ]
  }
};

六、总结

今天我们深入探讨了 Vue CLI 提供的 chainWebpack 和 configureWebpack 两种 Webpack 配置定制方式。chainWebpack 提供了链式 API，更加优雅和易于维护；configureWebpack 更加灵活，但需要对 Webpack 配置有深入的了解。在实际开发中，我们可以根据具体的需求选择合适的配置方式。

希望通过今天的讲座，大家能够更加自信地定制 Webpack 配置，打造出更加高效、更加个性化的 Vue 项目！

最后，记住一句至理名言：“Webpack 配置，三分靠学习，七分靠瞎蒙！” （开玩笑的，还是要认真学习的！）

谢谢大家！