在 webpack.config.js 中获取当前的 `--mode`

Question

如何在webpack.config.js中获取package.json中指定的当前--mode？（例如，用于推送一些插件。）

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

然后，我可以使用 process.env.NODE_ENV 在 Webpack 中获取环境。

当然，我可以通过 NODE_ENV 和 --mode，但我希望避免重复。

Answer 1

试试这个

package.json

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

所以如果你在 webpack config 中使用 env，它看起来像这样

module.exports = env => {
     const inProduction = env.production
     return  {
        entry: {...},
        output: {...},
        module: {...}
     }
}

有关设置 webpack.config.js 的更多详细信息。 (Environment Variables for webpack 4)

Answer 2

您想避免重复传递给脚本的选项。

导出函数时，将使用 2 个参数调用该函数：环境 env 作为第一个参数 和选项映射 argv 作为第二个参数。

package.json

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

webpack.config.js

module.exports = (env, argv) => {
    console.log(`This is the Webpack 4 'mode': ${argv.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 3

我最终 (ab) 使用 npm_lifecycle_script 在 DefinePlugin 中设置模式：

MODE: JSON.stringify(process.env.npm_lifecycle_script.substr(process.env.npm_lifecycle_script.indexOf('--mode ') + '--mode '.length, process.env.npm_lifecycle_script.substr(process.env.npm_lifecycle_script.indexOf('--mode ') + '--mode '.length).search(/($|\s)/)))

这从发出的 webpack 命令中获取 --mode 参数的值。

Answer 4

为了测试是否处于生产模式，在 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

在 webpack.config.js 中获取当前的 `--mode`

Get current `--mode` in webpack.config.js

node.js

npm

webpack

webpack-4