web-dev-qa-db-ja.com

webpack4でmode = "production"とともにNODE_ENV = "staging"を使用できますか？

私のアプリは、どのapiサーバーにリクエストするかを決定するためにNODE_ENVを使用します。

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")
       }
     })
   ]
 }
webpackwebpack-4
8
Fumiya Karasawa

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を再定義することは避けます。

1
sickrandir

ステージングビルドは、本番ビルドと同じように最適化する必要があると思います。そして、私が知る限り、いくつかのライブラリ（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
  };
};
9
Tomasz Mularczyk