Vue CLI 隐藏的 Webpack 配置：探索与自定义指南

在使用 Vue CLI 构建项目时，很多开发者会遇到一个问题：如何查看和修改底层的 Webpack 配置？ 默认情况下，Vue CLI 为了简化配置，隐藏了 Webpack 的详细配置信息。这虽然降低了上手难度，但也给需要进行深度定制的开发者带来了困扰。本文将深入探讨 Vue CLI 隐藏 Webpack 配置的原因，并提供几种有效的解决方案，帮助你掌控项目的构建过程。

问题场景重现：Webpack 配置“隐身”

通常情况下，我们希望能够直接修改 Webpack 的配置文件（例如 webpack.config.js），以便根据项目的具体需求进行优化，例如：

• 性能优化：调整代码分割策略，使用 Tree Shaking 减少 bundle 体积。
• 加载器配置：添加或修改图片、字体等资源的加载器。
• 插件配置：集成各种 Webpack 插件，如 webpack-bundle-analyzer 进行包体积分析，或使用 compression-webpack-plugin 开启 Gzip 压缩。

然而，当你尝试在 Vue CLI 项目的根目录下查找 webpack.config.js 文件时，会发现它并不存在。这就是 Vue CLI 的设计理念：通过抽象 Webpack 配置，提供一套开箱即用的构建方案。但同时也隐藏了底层细节，导致用户无法直接访问和修改 Webpack 配置。

底层原理剖析：Vue CLI 与 Webpack 的关系

Vue CLI 使用 @vue/cli-service 封装了 Webpack。@vue/cli-service 是一个开发依赖，它基于 Webpack 搭建了一套构建流程，并提供了一系列预设配置。当你运行 vue-cli-service build 或 vue-cli-service serve 命令时，实际上是 @vue/cli-service 内部调用 Webpack 进行构建或启动开发服务器。

Vue CLI 通过以下几种方式来管理 Webpack 配置：

1. 预设配置：@vue/cli-service 内置了一套默认的 Webpack 配置，适用于大多数常见场景。这套配置已经包含了诸如 Babel、ESLint、PostCSS 等常用工具的配置。
2. 插件系统：Vue CLI 允许通过插件来扩展 Webpack 配置。例如，@vue/cli-plugin-eslint 插件会添加 ESLint 相关的 Webpack loader 和插件。
3. vue.config.js：Vue CLI 允许你在项目的根目录下创建一个 vue.config.js 文件，用于自定义 Webpack 配置。这个文件会被 @vue/cli-service 读取，并与预设配置进行合并。

虽然 vue.config.js 提供了一定的自定义能力，但它并不能完全替代直接修改 webpack.config.js。例如，你可能无法直接访问和修改某些底层的 Webpack 配置选项。

解决方案：掌控 Webpack 配置的几种方法

下面介绍几种常见的解决方案，帮助你掌控 Vue CLI 项目的 Webpack 配置：

1. 使用 vue.config.js 修改配置

这是最常用的方法。在 vue.config.js 中，你可以通过 configureWebpack 和 chainWebpack 选项来修改 Webpack 配置。

• configureWebpack：接收一个对象或函数，用于简单的 Webpack 配置修改。

  // vue.config.js
  module.exports = {
    configureWebpack: {
      // 添加插件
      plugins: [
        new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: /\.js$|\.css$|\.html$/,
          threshold: 10240,
          minRatio: 0.8
        })
      ],
      // 修改输出目录
      output: {
        filename: '[name].[hash].js'
      }
    }
  }
  

• chainWebpack：接收一个 webpack-chain 实例，允许你更灵活地修改 Webpack 配置。webpack-chain 提供了一套链式 API，可以方便地添加、修改和删除 Webpack 配置项。

  // vue.config.js
  const CompressionWebpackPlugin = require('compression-webpack-plugin');
  
  module.exports = {
    chainWebpack: config => {
      // 修改图片 loader 的配置
      config.module
        .rule('images')
        .use('url-loader')
        .loader('url-loader')
        .tap(options => {
          options.limit = 4096; // 修改图片大小限制
          return options;
        });
  
       //添加 gzip 压缩插件
       config.plugin('compression-webpack-plugin').use(new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: /\.js$|\.css$|\.html$/,
          threshold: 10240,
          minRatio: 0.8
       }));
    }
  }
  

2. 使用 vue inspect 命令查看配置

Vue CLI 提供了一个 vue inspect 命令，可以用来查看完整的 Webpack 配置。你可以通过以下命令将配置输出到控制台或文件中：

vue inspect > webpack.config.js

然后你就可以打开 webpack.config.js 文件，查看完整的 Webpack 配置。虽然你不能直接修改这个文件，但它可以帮助你了解 Vue CLI 的默认配置，并为自定义配置提供参考。

3. 使用 Webpack Chain API

webpack-chain 是一个强大的 Webpack 配置管理工具，它允许你使用链式 API 来修改 Webpack 配置。Vue CLI 的 chainWebpack 选项就是基于 webpack-chain 实现的。

通过 webpack-chain，你可以方便地添加、修改和删除 Webpack 配置项。例如，你可以使用 config.module.rule() 添加新的 loader，使用 config.plugin() 添加新的插件，使用 config.resolve.alias() 配置别名等。

4. Eject：终极解决方案（不推荐）

Vue CLI 提供了一个 vue eject 命令，可以将项目从 Vue CLI 的管理中移除，并将所有 Webpack 配置暴露出来。运行 vue eject 命令后，你就可以直接修改 webpack.config.js 文件了。

注意： vue eject 是一个单向操作，一旦执行就无法撤销。而且，执行 vue eject 后，你将失去 Vue CLI 提供的所有便利功能，需要自己维护 Webpack 配置。因此，除非你有非常特殊的需求，否则不建议使用 vue eject。

实战避坑经验总结

• 优先使用 vue.config.js：尽量使用 vue.config.js 来修改 Webpack 配置。这是 Vue CLI 官方推荐的方法，可以保证你的配置与 Vue CLI 的版本兼容。
• 善用 chainWebpack：chainWebpack 提供了更灵活的配置方式，可以满足大多数自定义需求。
• 谨慎使用 vue eject：只有在确实需要完全掌控 Webpack 配置时，才考虑使用 vue eject。并且要做好备份，以防万一。
• 关注 Webpack 版本：Vue CLI 使用的 Webpack 版本可能会影响配置方式。请参考 Vue CLI 和 Webpack 的官方文档，了解不同版本的配置差异。
• 合理使用 Loader 和 Plugin：在配置 Webpack 时，合理使用 Loader 和 Plugin 可以大大提高构建效率和项目性能。例如，可以使用 babel-loader 将 ES6+ 代码转换为 ES5 代码，可以使用 uglifyjs-webpack-plugin 压缩 JavaScript 代码，可以使用 css-loader 和 style-loader 处理 CSS 文件等。
• 优化资源加载速度：使用 CDN 加速静态资源的加载，例如使用 jsDelivr 或者 cdnjs 提供的 CDN 服务。同时，可以通过配置 Nginx 反向代理，启用 Gzip 压缩，优化静态资源的传输。

通过以上方法，相信你已经能够更好地掌控 Vue CLI 项目的 Webpack 配置，并根据项目的实际需求进行定制和优化。