在webpack配置中获取模式[webpack 4]

Question

如何在webpack配置中获取模式,例如,推送一些插件.

package.json

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

我在webpack 3中做了什么

package.json

"scripts": {
    "build": "cross-env NODE_ENV=development webpack",
    "prod": "cross-env NODE_ENV=production webpack"
  },

然后,我能够通过webpack获取环境 process.env.NODE_ENV

当然,我可以通过NODE_ENV,--mode但我更愿意避免重复.

Answer 1

您希望避免重复在脚本上传递的选项.

导出函数时,将使用2个参数调用该函数:将环境作为第一个参数,将选项图作为第二个参数.

的package.json

"scripts": {
  "build-dev": "webpack --mode development",
  "build-prod": "webpack --mode production"
},

webpack.config.js

module.exports = (env, options) => {
    console.log(`This is the Webpack 4 'mode': ${options.mode}`);
    return {
        ...
    };
}

这些是结果:

用于npm run build-dev:

> webpack --mode development

This is the Webpack 4 'mode': development
Hash: 554dd20dff08600ad09b
Version: webpack 4.1.1
Time: 42ms
Built at: 2018-3-14 11:27:35

用于npm run build-prod:

> webpack --mode production

This is the Webpack 4 'mode': production
Hash: 8cc6c4e6b736eaa4183e
Version: webpack 4.1.1
Time: 42ms
Built at: 2018-3-14 11:28:32

Answer 2

要测试是否处于生产模式，在webpack.config.js文件中我使用这个：

const isProduction = process.argv[process.argv.indexOf('--mode') + 1] === 'production';

const config = {
    ...
};

if (isProduction) {
    config.plugins.push(new MiniCssExtractPlugin());
} else { // isDev
    config.devtool = /*'source-map'*/  'inline-source-map';
}

module.exports = config;

停止尝试NODE_ENV，是老派（webpack 3）。

这更适合使用 import / webpack resolver