Open4

console.logを本番環境で出力させないための設定について

まさぴょんまさぴょん

Next.js × Webpack で本番環境のみconsole.log を出力しない設定について

  • terser-webpack-plugin ライブラリを使用する
    • tenrserを利用して、JavaScriptを圧縮するWebpackのプラグインになります。
yarn add -D terser-webpack-plugin
  • removeImportsは、今回の設定とは、関係ない。。。
const TerserPlugin = require('terser-webpack-plugin');
const isProd = process.env.NODE_ENV === 'production';

const removeImports = require('next-remove-imports')({
  test: /node_modules([\s\S]*?)\.(tsx|ts|js|mjs|jsx)$/,
  matchImports: '\\.(less|css|scss|sass|styl)$',
});

module.exports = removeImports({
  webpack: (config, options) => {
     // ----- ここから本番環境で、console.log を出力しない系の設定 -----
    config.optimization.minimize = true;
    config.optimization.minimizer = [
      new TerserPlugin({
        // Build時に console.log を削除する
        terserOptions: {
          compress: { drop_console: true },
        },
        // LICENCE 情報を残してその他のコメントを削除する
        extractComments: 'all',
      }),
    ];
    // ----- ここまで本番環境で、console.log を出力しない系の設定 -----
    return config;
  },
});

参考・引用

https://github.com/webpack-contrib/terser-webpack-plugin#options

https://t-cr.jp/memo/20817942cf9bf53dc

https://opvel.com/2021/08/18/post-1787/