Reactでビルド時にconsole.logを除去

opvel

3年前

Reactでwebpackのterser pluginでconsole.logをビルド時に除去する設定。ごめんよく調べずこの記事書いてるのでメモ程度と思って読んで。

まずcracoインストール

npm install @craco/craco --save

package.jsonを書き換える

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
  },

プロジェクトのルートにcraco.config.jsを置く。

内容は以下

const TerserPlugin = require("terser-webpack-plugin");
const isProd = process.env.NODE_ENV === "production";

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.optimization.minimize = isProd;
      webpackConfig.optimization.minimizer = [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: isProd,
            },
            output: {
              comments: false,
            },
            mangle: false,
          },
        }),
      ];
      return webpackConfig;
    },
  },
};

・mangle:falseにしないと何故かgraphqlライブラリがエラーを吐く。