webpackで本番用と開発用にビルド方法を切り替える

本記事では、webpackで本番用と開発用にビルド方法を
切替える方法を紹介していきます。

本記事の内容です。

本番用ビルド設定

webpack.config.jsに、mode行を追加します。
内容は、下記の通りです。

module.exports = {
 
    // メインとなるJavaScriptファイル（エントリーポイント）
    entry: `./js/index.js`,

    // 下記の1行を追加する。値は'production'。
    mode: 'production',

    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
  };

上記の設定でビルドを行うと最適化された状態でjsファイルの出力が行われます。
また、mode行を省略した時も、上記と同じ設定でビルドされるようです。

開発用ビルド設定

webpack.config.jsに、mode行およびdevtool行を追加します。
内容は、下記の通りです。

module.exports = {
 
    // メインとなるJavaScriptファイル（エントリーポイント）
    entry: `./js/index.js`,

    // 下記の1行を追加する。値は'development'。
    mode: 'development',
   
    // 下記の1行を追加する。値はお好みで。
    devtool: 'cheap-module-eval-source-map',

    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
  };

上記の設定でビルドを行うと、ブラウザの開発者ツール上でデバッグ可能な形で
jsファイルが出力されます。
ブラウザ上でソースコードを確認、デバッグ実行を行う際は、
webpack://
という場所にファイルが出力されますので、注意してください。(Chromeで確認。)
IE11の場合は、jsファイルを列挙した際にそのまま表示されるようです。

開発用ビルド設定のdevtoolについて

上記で説明したdevtoolの値には、下記サイトで説明されている値を設定することができます。
Devtool

特に好みが無ければ、上記と同じ
cheap-module-eval-source-map
で良いと思います。