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

Posted 2023-02-22

【中文标题】在 webpack.config.js 中获取当前的 `--mode`

【英文标题】：Get current `--mode` in webpack.config.js

【发布时间】：2018-08-22 19:17:24

【问题描述】：

如何在 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 传递，但我更愿意避免重复。

【问题讨论】：

和你问的一样。

【参考方案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)

【参考方案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

【讨论】：

这可行，但是，当我必须将 import/resolver 与 eslint 一起使用时，它似乎不接受函数。

对我来说，它通过使用“env.mode”来工作。第一个参数，而不是第二个。

@corvid 请检查我的回答，可能会对 webpack 解析器有所帮助。

在 Webpack 的官方文档中，他们使用 argv.mode 来获取实际模式：webpack.js.org/concepts/mode

我对您的答案投了赞成票，因为我将其设置为相等的 mode=production 而不是空格....谢谢

【参考方案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 参数的值。

【参考方案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 期望我们获得该模式的方式。这一点都不干净。