webpackのmodeによって設定を切り替える

webpackのモード(production、development)によって、ビルド設定を切り替える手順。

本番環境やテスト環境によってビルド結果を振り分けることができる。

package.jsonの設定

reactのpackage.jsonのscript部分を編集します。

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server",
  "build": "webpack --mode=production"
},

デバック時は「npm start」でwebpack-dev-serverが起動します。

ビルド時は「npm run-script build」でwepbackでビルドします、その際にmodeでproduction(本番)の変数を渡します。

webpack.config.jsの設定

本番ビルド時は環境変数のmodeにproductionが代入されていますので、それを使って不振り分けます。

const webpack = require('webpack');
const config = {
  entry: './src/app.js',

  // ～その他の記述は省略
}

module.exports = (env, argv) => {
  // modeオプション判定(devtoolの設定)
  const IS_PRODUCTIONS = (argv.mode === 'production');
  config.devtool = IS_PRODUCTIONS ? 'none' : 'inline-source-map';

  return config;
}

webpackの主な設定をconst configに記述して、module.exports内でmodeによって設定を追加しています。

argvに実行時にmodeで渡された値が入っているので、その値でproductionか判定しています。

まとめ

開発時はデバックしやすいようにソースマップを表示するけど、本番ビルド時には表示したくないなどmodeに応じて設定を変更することができます。