IT二刀流にはプロモーションが含まれています。

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

reactアイキャッチ

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に応じて設定を変更することができます。

ITエンジニアの転職

いまITエンジニアの需要は急拡大しています。
ITエンジニアの経験があれば好条件で転職することも難しくありません。

転職ドラフト

☆ 支援ご協力のお願い ☆

この記事が「役に立った」と感じたら

投げ銭の「OFUSEで応援」で支援して頂けたら励みになります!

OFUSEのやり方(説明)

関連記事
記事特集