webpackを用いたフロントエンド開発環境の構築 その4

〜console.logを削除した本番用のファイルを出力　|　ソースマップの有効化〜

↓YOUTUBEでも解説しています↓

console.logを削除した本番用のファイルを出力できるようにする

プラグイン(terser-webpack-plugin)をインストールする

npm install --save-dev terser-webpack-plugin@3.0.8

本番用ファイルを更新(10〜23行目のoptimizationの箇所)

// 設定をマージする関数
const { merge } = require("webpack-merge");
// 共通設定を読み込む
const commonConfig = require("./webpack.common.js");

// 開発用の設定と共通設定（commonConfig）をマージする
module.exports = merge(commonConfig, {
// モードの設定（モードを指定しないとwebpack実行時に警告が出る）
  mode: "production",
  optimization: {
    minimizer: [
      // JavaScritpt を圧縮する
      new TerserPlugin({
        // terser のオプション
        terserOptions: {
          // console を削除する
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
});

動作確認する

＜ビルド前＞

• bundle.js(バンドル前のエントリーポイントとなるapp.js内のconsole.logが含まれている)

＜ビルド後＞

• npm run buildすると、drop_consoleがtrueになっているので、console.logの記述が削除される

ソースマップの有効化

ソースマップは、開発時にデバッグしやすいように、エラーがどこで（バンドル前のどのファイルで）発生しているかを明示してくれる機能

開発用のwebpackの設定に追記する(12行目「devtool: “cheap-module-eval-source-map”,」の箇所)

// webpack.dev.js
// 設定をマージする関数
const { merge } = require("webpack-merge");
// 共通設定を読み込む
const commonConfig = require("./webpack.common.js");
// 開発用の設定と共通設定（commonConfig）をマージする
module.exports = merge(commonConfig, {
  mode: "development",
  watch: true,
  devtool: "cheap-module-eval-source-map",
});

エラーが生じている箇所が「app.js」というバンドル前のファイルを明示してくれているので、デバックしやすい(ソースマップの設定がないと、バンドル後の「bundle.js」にエラーが生じているというざっくりとしたメッセージとなるため、修正がしにくい)