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;
},
});
参考・引用
React × Webpack で本番環境のみ console.log を出力しない設定について
Webpackでビルド時にconsole.logを削除する
React Code上で console.log をすり替えるような方法
Vite の場合
Webpack Only で考える場合