webpack - 我可以在 webpack 4 中使用模式为 ="staging"的 NODE_ENV ="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他们会“认为”这是一个开发环境。

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

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