webpack config, как менять плагины в зависимости от среды

Question

Привет, возможно ли сделать плагины в конфигурации веб-пакета в зависимости от среды?

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

Заранее спасибо

Answer 1

В зависимости от ваших требований, добавьте плагины, если env is production, иначе верните false, и отфильтруйте массив на основе логического значения, но предпочтительным способом является создание другого файла для другого env, это будет намного более чистым подходом. .

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)

Answer 2

Вы можете иметь конфигурацию файла для каждой среды

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"
}

Answer 3

Используя ваш пример, я бы предпочел что-то вроде этого:

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; })

---

Что делает этот фрагмент, так это добавление условного (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]