Vue CLI 隐藏的 Webpack 配置：揭秘与自定义策略

在使用 Vue CLI 构建项目时，很多开发者会遇到一个问题：为什么我无法直接看到或修改底层的 Webpack 配置？ 这是因为 Vue CLI 为了简化开发流程，默认将 Webpack 配置进行了抽象和封装。虽然这样做降低了上手难度，但也给需要深度定制 Webpack 配置的开发者带来了一些困扰。 本文将深入探讨 Vue CLI 为何不显示 webpack 配置，并提供几种修改和扩展 Webpack 配置的有效方法。

场景重现：期望与现实的差距

设想一个常见的场景：我们需要使用 compression-webpack-plugin 插件来开启 Gzip 压缩，以优化网站性能。按照常规的 Webpack 使用方式，我们会直接修改 webpack.config.js 文件，添加插件配置即可。但在 Vue CLI 项目中，我们并没有直接访问 webpack.config.js 的权限。

例如，我们期望在 vue.config.js 中找到类似如下的配置项：

// 理想中的 webpack 配置
module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /\.js$|\.css$/,
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
}

但实际上，我们直接访问 Webpack 配置的尝试往往是徒劳的，因为 Vue CLI 默认情况下并不直接暴露完整的 Webpack 配置。 这就引发了我们的问题：如何才能修改 Webpack 配置呢？

底层原理：Vue CLI 的封装策略

Vue CLI 采用了抽象封装的策略来简化 Webpack 配置。它预先配置了一套默认的 Webpack 配置，并将其隐藏起来，只暴露一些常用的配置选项供开发者修改。这样做的好处是降低了项目的复杂度，使得开发者可以专注于业务逻辑的开发，而无需关心底层的 Webpack 配置细节。 然而，这种封装也限制了我们对 Webpack 配置的自由定制。

Vue CLI 内部使用了 webpack-chain 这个库来管理 Webpack 配置。webpack-chain 提供了一套链式 API，可以方便地修改 Webpack 配置。 Vue CLI 通过 vue.config.js 文件，允许开发者使用 configureWebpack 和 chainWebpack 两个选项来修改 Webpack 配置。

解决方案：定制 Webpack 配置的几种方式

Vue CLI 提供了多种方式来定制 Webpack 配置，以满足不同场景的需求。

1. configureWebpack 选项

configureWebpack 允许我们直接修改 Webpack 配置对象。它可以接收一个对象或一个函数。 如果接收的是一个对象，则该对象会被合并到最终的 Webpack 配置中。 如果接收的是一个函数，则该函数会接收 Webpack 配置对象作为参数，我们可以直接修改该对象。以下是一个使用 configureWebpack 添加 Gzip 压缩插件的示例：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /\.js$|\.css$/,
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: false // 是否删除原文件，生产环境建议删除，开发环境保留
      })
    ]
  }
}

2. chainWebpack 选项

chainWebpack 选项允许我们使用 webpack-chain 提供的链式 API 来修改 Webpack 配置。 这种方式更加灵活，可以对 Webpack 配置进行更细粒度的控制。以下是一个使用 chainWebpack 添加 Gzip 压缩插件的示例：

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

module.exports = {
  chainWebpack: config => {
    config.plugin('compression-webpack-plugin') // 添加插件实例名称
      .use(CompressionWebpackPlugin, [{
        algorithm: 'gzip',
        test: /\.js$|\.css$/,
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: false // 是否删除原文件，生产环境建议删除，开发环境保留
      }]);
  }
}

3. 使用 vue inspect 命令

Vue CLI 提供了 vue inspect 命令，可以查看完整的 Webpack 配置。 我们可以使用 vue inspect > webpack.config.js 命令将 Webpack 配置导出到 webpack.config.js 文件中，然后进行修改。 但需要注意的是，直接修改导出的 Webpack 配置是不被推荐的做法，因为这会破坏 Vue CLI 的封装，导致项目难以维护。 建议使用 configureWebpack 或 chainWebpack 选项来修改 Webpack 配置。

vue inspect > webpack.config.js

这条命令将完整的 Webpack 配置输出到 webpack.config.js 文件。可以结合 grep 命令来查找特定的配置项，例如：

vue inspect | grep entry

实战避坑：Webpack 配置的常见问题

在修改 Webpack 配置时，需要注意以下几点：

• 避免直接修改导出的 Webpack 配置： 尽量使用 configureWebpack 或 chainWebpack 选项来修改 Webpack 配置，避免破坏 Vue CLI 的封装。
• 注意插件的顺序： Webpack 插件的顺序非常重要，不同的顺序可能会导致不同的结果。 需要仔细阅读插件的文档，了解插件的正确使用方式。
• 合理配置 loader： Webpack loader 用于处理不同类型的文件。 需要根据项目的需求，选择合适的 loader，并进行正确的配置。 例如，在使用 babel-loader 时，需要配置 presets 和 plugins 选项，以指定 Babel 的编译规则。
• 测试与验证： 在修改 Webpack 配置后，需要进行充分的测试和验证，以确保配置的正确性。 可以使用 webpack-dev-server 启动开发服务器，并观察项目的运行情况。 对于生产环境，需要进行性能测试，以评估配置的优化效果。

此外，在使用 Nginx 反向代理和负载均衡时，需要注意以下几点：

• 配置正确的 proxy_pass 指令： proxy_pass 指令用于将请求转发到后端服务器。 需要确保 proxy_pass 指令配置正确，指向正确的后端服务器地址。
• 配置 X-Forwarded-For 和 X-Forwarded-Proto Header： 这两个 Header 用于传递客户端的真实 IP 地址和协议。 如果后端服务器需要获取客户端的真实 IP 地址和协议，则需要配置这两个 Header。
• 调整 Nginx 的并发连接数： Nginx 的并发连接数是指 Nginx 同时处理的连接数。 如果并发连接数过高，可能会导致 Nginx 性能下降。 可以通过修改 nginx.conf 文件中的 worker_connections 指令来调整 Nginx 的并发连接数。 使用宝塔面板可以方便地管理 Nginx 配置，包括反向代理和负载均衡。

通过深入理解 Vue CLI 的封装策略，并掌握定制 Webpack 配置的几种方式，我们可以更好地控制项目的构建过程，并优化项目的性能。