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

Question

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

Answer 1

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

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

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
  };
};

Answer 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。

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

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

Can I use NODE_ENV="staging" with mode="production" in webpack 4?

webpack

webpack-4