「terser-webpack-plugin」でproduction時にだけconsole.log()などを削除する

console.log()などを使って、変数の値を確認しながら関数を作っていくことはよくあると思います。
でも、本番公開時にはログは消しておきたいけど、これから変更があることを考慮するとconsole.log()を残しておきたいこともあります。

「terser-webpack-plugin」を使えば、以下のような処理をwebpack側に設定できるようになります。

• cross-env NODE_ENV=development：console.log()を残す
• cross-env NODE_ENV=staging：console.log()を残す
• cross-env NODE_ENV=production：console.log()を削除する

webpackの設定例

webpackの公式サイトによると、webpackのv5以降は「terser-webpack-plugin」が標準でインストールされているようです。
ただし、オプションを変更したい場合とv5未満を使っている場合は以下のようにインストールが必要になります。

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

「webpack.config.js」での設定は以下のようになります（一部割愛）。

const TerserPlugin = require('terser-webpack-plugin'); // ココ

const environment = process.env.NODE_ENV;
const isDevelopment = environment === 'development';
const isStaging = environment === 'staging';
const isProduction = environment === 'production'; // productionを判定
const environmentMode = isDevelopment ? 'development' : 'production';

module.exports = {
  mode: environmentMode,
  entry: {
    ...
  },
  output: {
    ...
  },
  module: {
    ...
  },
  plugins: [
    new TerserPlugin({
      terserOptions: {
        compress: { drop_console: isProduction ? true: false }  // ココ
      }
    }),
  ],
};

書式はterserOptionsで確認できます（今回はminimizer:ではなくplugins:で指定していますが、理由は忘れました…）。

console.log()などを削除するかどうかは、Compress optionsのdrop_consoleで設定できます。デフォルトはfalseなので、通常は削除されないことがわかります。
設定をすべて把握できていないのですが、プロジェクトの途中で導入する場合は、設定まわりを確認しておいたほうが安全そうですね。