webpack5 でのバンドル時に console.log を出力しない方法

uglifyjs-webpack-plugin は非推奨

ググると出てくる記事では uglifyjs-webpack-plugin を使用しているケースが結構ありました。

しかしこちらは現在非推奨とされていて、 terser-webpack-plugin を使ってね、と書いてあります。

uglifyjs-webpack-plugin の GitHub

terser-webpack-plugin を設定する

インストールしていない場合はインストールします。
npm i -D terser-webpack-plugin

オプションの drop_console を指定します。

webpack.config.js

const TerserPlugin = require("terser-webpack-plugin")
//（中略）
optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true, // console.log を出力するかどうか
        },
      },
    }),
  ],
}

以上で完了です！webpackを走らせて確かめてみてください。

terser-webpack-plugin の GitHub だけでなく、webpack の公式サイトにも書かれていなかったので、備忘録も含めて共有しました。

ちなみに大元のterserのGitHubには使い方の記述がありました。（気づかんて…。）

drop_console (default: false) -- Pass true to discard calls to console.* functions. If you wish to drop a specific function call such as console.info and/or retain side effects from function arguments after dropping the function call then use pure_funcs instead.

検証時のパッケージ情報

• webpack v5.58.1
• terser-webpack-plugin v5.1.1

参考文献

https://t-cr.jp/memo/20817942cf9bf53dc
https://webpack.js.org/plugins/terser-webpack-plugin/
https://github.com/webpack-contrib/uglifyjs-webpack-plugin
https://github.com/webpack-contrib/terser-webpack-plugin
https://github.com/terser/terser