webpackの設定を開発環境と本番環境で変更する
webpack.config.jsで本番環境でのビルドのみコードを圧縮するなどの処理を設定したい場合があります。
webpackの設定を開発環境と本番環境で変更する方法を紹介します。
パッケージのインストール
cross-envというパッケージをインストールします。
$ npm install --save-dev cross-envscriptsの修正
package.jsonのscriptsにcross-envの設定を追加します。
package.json"scripts": {
"devbuild": "cross-env NODE_ENV=development webpack",
"prodbuild": "cross-env NODE_ENV=production webpack"
}webpack.config.jsの修正
NODE_ENV=XXXと指定するとprocess.env.NODE_ENVの値にXXXが設定されます。
webpack.config.jsif (process.env.NODE_ENV === 'production') {
// prodbuildコマンドで実行した場合の処理
}cross-envで設定した値はwebpack.config.jsだけでなくビルド対象のjsファイルでも参照できます。