我可以在 webpack 4 中使用 NODE_ENV="staging" 和 mode="production" 吗？

Posted 2023-02-22

【中文标题】我可以在 webpack 4 中使用 NODE_ENV="staging" 和 mode="production" 吗？

【英文标题】：Can I use NODE_ENV="staging" with mode="production" in webpack 4?

【发布时间】：2018-08-06 14:44:37

【问题描述】：

我的应用使用 NODE_ENV 来决定应该向哪个 api 服务器请求。

NODE_ENV="production" => https://api.***/
NODE_ENV="staging" => https://api.staging-***/
NODE_ENV="development" => http://localhost:3000/

我想使用 mode="production" 构建暂存包，但保留 NODE_ENV="staging"。

我尝试使用下面的配置进行构建，但 bundle.js 变成了 NODE_ENV="production"。

   mode: "production",
   plugins: [
     new webpack.DefinePlugin(
       'process.env': 
         'NODE_ENV': JSON.stringify("staging")
       
     )
   ]
 

【参考方案1】：

我认为您希望您的暂存构建像您的生产构建一样得到优化。据我所知，一些库（如React）会检查NODE_ENV === "production" 是否会放弃一些错误处理或提供进一步的优化。因此，如果您将NODE_ENV 设置为staging，他们会“认为”这是一个开发环境。

在这种情况下，我要做的就是使用不同的变量，例如：

package.json

"scripts": 
  "dev": "webpack-dev-server --config webpack.config.js --env.TARGET_ENV=development",
  "staging": "webpack --config webpack.config.js --env.TARGET_ENV=staging",
  "production": "webpack --config webpack.config.js --env.TARGET_ENV=production"
,

webpack.config.js

module.exports = (env) => 
  const mode = env.TARGET_ENV === 'development' ? 'development' : 'production';

  return 
    mode: mode,
    plugins: [
      new webpack.DefinePlugin(
        'process.env': 
          'TARGET_ENV': JSON.stringify(env.TARGET_ENV)
        
      )
    ]
    // ...rest of config based on environment
  ;
;

【讨论】：

我们如何确保 TARGET_ENV 在运行时可以访问？

【参考方案2】：

Webpack-cli 已被弃用，带有 env 的语法将不再适用于 Webpack-command (https://github.com/webpack-contrib/webpack-command#the---env-flag-is-nuked)。

为了满足您的要求，我将使用一个简单的环境变量并以标准节点方式使用它

var API_URL = 
  production: JSON.stringify('https://foo.bar/api'),
  development: JSON.stringify('http://localhost:3000/api'),
  staging: JSON.stringify('http://foo.stage.bar/api')


module.exports = function(argv) 
  const TARGET = process.env.TARGET_ENV ? process.env.TARGET_ENV : 'development';
  return 
    mode: argv.mode ? argv.mode : 'development',
....
    new webpack.DefinePlugin(
        'API_URL': API_URL[TARGET]
    ),
....

然后像这样调用 webpack：

TARGET_ENV=staging webpack 

通过这种方式，您会发现您的环境变量 API_URL 在应用程序中全局定义。

我会避免通过定义插件重新定义 NODE_ENV。

【讨论】：

关于--env 的非常有用的链接！谢谢你。正如您所说，我最终定义了环境变量以及EnvironmentPlugin (webpack.js.org/plugins/environment-plugin)。工作得很好:)

可能值得注意的是 webpack-command 现在已弃用，而不是 webpack-cli。 --env 标志仍然是一件事，但看起来您仍然可以执行此答案中概述的操作。 webpack.js.org/api/cli/#cli-environment-variables