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

·  阅读 64

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

webpack 环境变量,与操作系统中的 bashCMD.exe 这些 shell 环境变量 不同。

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

npx webpack --env goal=local --env production --progress
复制代码
--envstring[]当它是一个函数时,传递给配置的环境变量
--progressboolean, string在构建过程中打印编译进度

注意:如果设置 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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改