消除 webpack.config.js 在 开发环境 和 生产环境 之间的差异

目的：消除 webpack.config.js 在 开发环境 和 生产环境 之间的差异。

webpack 环境变量，与操作系统中的 bash 和 CMD.exe 这些 shell 环境变量 不同。

注意：webpack 命令行 环境配置 的 --env 参数，可以允许你传入任意数量的环境变量。而在 webpack.config.js 中可以访问到这些环境变量。例如，--env production 或 --env goal=local。

npx webpack --env goal=local --env production --progress
复制代码

注意：如果设置 env 变量，却没有赋值，--env production 默认表示将 env.production 设置为 true。还有许多其他可以使用的语法。更多详细信息，请查看 webpack CLI 文档。

对于我们的 webpack 配置，有一个必须要修改之处。通常，module.exports 指向配置对象。要使用 env 变量，你必须将 module.exports 转换成一个函数：

webpack.config.js

const path = require('path');
​
module.exports = (env) => {
  // Use env.<YOUR VARIABLE> here:
  console.log('Goal: ', env.goal); // 'local'
  console.log('Production: ', env.production); // true
​
  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
     
    mode: env.production?'production':"development", // 告知 webpack 使用相应模式的内置优化
    // 优化选择配置
    optimization: {
      minimizer: [new CssMinimizerWebpackPlugin(),new TerserPlugin()],
      // runtimeChunk: "single", // 创建一个在所有生成 chunk 之间共享的运行时文件。
      // splitChunks: {
      //   chunks: "all",
      // },
​
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\/]node_modules[\/]/,
            name: "vendors",
            chunks: "all",
          },
        },
      },
    },
  };
};
复制代码

terser-webpack-plugin

该插件使用 terser 来压缩 JavaScript。

webpack v5 开箱即带有最新版本的 terser-webpack-plugin。如果你使用的是 webpack v5 或更高版本，同时希望自定义配置，那么仍需要安装 terser-webpack-plugin。如果使用 webpack v4，则必须安装 terser-webpack-plugin v4 的版本。

首先，你需要安装 terser-webpack-plugin：

$ npm install terser-webpack-plugin --save-dev
复制代码

然后将插件添加到你的 webpack 配置文件中。例如：

webpack.config.js

const TerserPlugin = require("terser-webpack-plugin");
​
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};
复制代码

接下来，按照你习惯的方式运行 webpack。