webpack config 如何根据环境更改插件答案

【问题标题】：webpack config how to change plugins depending on environmentwebpack config 如何根据环境更改插件
【发布时间】：2019-05-20 13:51:23
【问题描述】：

您好，是否可以根据环境在 webpack 配置中制作插件？

plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new CopyWebpackPlugin([
            {from: 'src/www/'}
        ])
        // new BundleAnalyzerPlugin(),
        // new CompressionPlugin({
        //     algorithm: 'gzip',
        //     test: /\.js$|\.css$|\.html$/
        // }),
        // new UglifyJsPlugin({
        //     test: /\.js(\?.*)?$/i
        // })
    ]

只有在我将其与NODE_ENV=production 捆绑在一起时才应使用注释的那些

提前致谢

【问题讨论】：

你可以创建多个 webpack 配置文件，每个你想要支持的环境一个。 gist.github.com/Pepeye/8228bd468d5bc065fb33
每个环境都可以有一个配置文件。

标签： javascript node.js webpack

【解决方案1】：

根据您的要求，如果 env 是生产环境，则添加插件，否则返回 false，并根据布尔值过滤数组，但首选方法是为不同的环境创建不同的文件，这样会更干净.

plugins: [
    new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new CopyWebpackPlugin([
            {from: 'src/www/'}
        ])
        NODE_ENV==='production' ? new BundleAnalyzerPlugin() : false,
        NODE_ENV==='production' ? new CompressionPlugin({
             algorithm: 'gzip',
             test: /\.js$|\.css$|\.html$/
        }) : false,
        NODE_ENV==='production' ?  new UglifyJsPlugin({
             test: /\.js(\?.*)?$/i
        }) : false
 ].filter(Boolean)

【讨论】：

当我运行这个我得到错误NODE_ENV is not defined
在你的 package.json 中应该有一个脚本来设置 NODE_ENV 变量，比如 "scripts": { "build": "NODE_ENV=production webpack --config webpack/prod.config.js" , }
当然我是这样运行的："build": "node_modules/.bin/cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 webpack --config webpack.config.js --optimize-minimize --optimize-dedupe", 但是终端返回 NODE_ENV not defined
用 process.env.NODE_ENV 替换 NODE_ENV 检查，例如 process.env.NODE_ENV==='production' ？新的 BundleAnalyzerPlugin() : false,
太棒了！它对我有用，但答案并不完整。您应该在“脚本”部分的 package.json 中有类似 "build": "cross-env NODE_ENV=production webpack --mode production --hide-modules --progress" 的内容。在您的webpack.config.json 中使用类似const isProduction = process.env.NODE_ENV === "production" 或仅使用process.env.NODE_ENV。

【解决方案2】：

使用你的例子，我更喜欢这样的：

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.LoaderOptionsPlugin({
        debug: true
    }),
    new CopyWebpackPlugin([
        {from: 'src/www/'}
    ])
    NODE_ENV === 'production' && new BundleAnalyzerPlugin(),
    NODE_ENV === 'production' && new CompressionPlugin({
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$/
    }),
    NODE_ENV === 'production' && new UglifyJsPlugin({
        test: /\.js(\?.*)?$/i
    })
].filter(n => n)

或者如果你更喜欢 ES5：

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.LoaderOptionsPlugin({
        debug: true
    }),
    new CopyWebpackPlugin([
        {from: 'src/www/'}
    ])
    NODE_ENV === 'production' && new BundleAnalyzerPlugin(),
    NODE_ENV === 'production' && new CompressionPlugin({
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$/
    }),
    NODE_ENV === 'production' && new UglifyJsPlugin({
        test: /\.js(\?.*)?$/i
    })
].filter(function (plugin) { return plugin; })

这个 sn-p 所做的是向数组添加条件 (NODE_ENV === 'production')，这只是告诉 JS 编译器将 false 或右侧代码写入数组。另一方面，filter 函数只是说，过滤掉 false 或 false-ish 的内容。

假设我们在NODE_ENV = 'development'，我们的插件看起来像这样：

[HotModuleReplacementPlugin, NamedModulesPlugin, LoaderOptionsPlugin, CopyWebpackPlugin, false, false, false].filter(...)

在过滤器发挥作用后，我们有了这个：

[HotModuleReplacementPlugin, NamedModulesPlugin, LoaderOptionsPlugin, CopyWebpackPlugin]

如果我们现在假设我们在NODE_ENV = 'production'，我们的插件将如下所示：

[HotModuleReplacementPlugin, NamedModulesPlugin, LoaderOptionsPlugin, CopyWebpackPlugin, BundleAnalyzerPlugin, CompressionPlugin, UglifyJsPlugin].filter(...)

在过滤器发挥作用后，我们有了这个：

[HotModuleReplacementPlugin, NamedModulesPlugin, LoaderOptionsPlugin, CopyWebpackPlugin, BundleAnalyzerPlugin, CompressionPlugin, UglifyJsPlugin]

【讨论】：

【解决方案3】：

每个环境可以有一个文件配置

webpack
├── base.config.js
└── prod.config.js

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

module.exports = {
  plugins: [
    new webpack.EnvironmentPlugin([
      'NODE_ENV',
    ]),
  ],
};

// prod.config.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const baseConfig = require('./base.config.js');

module.exports = merge(baseConfig, {
  ....
  plugins: [
    // Minify JS
    new UglifyJsPlugin({
      sourceMap: false,
      compress: true,
    })
  ],
});

然后在你的package.json

"scripts": {
  "build": "NODE_ENV=production webpack --config webpack/prod.config.js",
  "start": "NODE_ENV=development webpack-dev-server --config webpack/dev.config.js"
}

【讨论】：

【解决方案4】：

这就是我只在生产中使用插件的方式

// Load this plugin only when running webpack in a production environment
if (process.env.NODE_ENV == 'production') {
  module.exports.plugins.push(
    new BundleAnalyzerPlugin({
      analyzerPort: 4000
    }),
  );
}

【讨论】：

【解决方案5】：

我会选择休息操作员以获得更清晰的外观：

const isDev = process.env.NODE_ENV !== 'production';

const plugins = isDev ? [
  new ForkTsCheckerWebpackPlugin(),
] : [
  new BundleAnalyzerPlugin({
    openAnalyzer: process.env.OPEN_ANALYZER === 'true',
  }),
  new webpack.EnvironmentPlugin({
    NODE_ENV: 'production',
    DEBUG_PROD: false,
    START_MINIMIZED: false,
  }),
]

然后在配置文件里面：

plugins: [
     ...plugins,
     new CopyWebpackPlugin({
      patterns: [
        {
          from: 'source',
          to: 'destination',
        },
      ],
    }),
  ],

现在我们不需要那些讨厌的比较了。

【讨论】：