19

我的应用程序使用 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")
       }
     })
   ]
 }
4

2 回答 2

16

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

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

包.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
  };
};
于 2018-03-17T15:47:18.827 回答
4

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。

于 2018-06-26T13:01:42.730 回答