[Vue・terser-webpack-plugin] ビルド時にconsole.logを除去

2021-08-18IT記事,Vueterser-webpack-plugin,Vue.js

Vue Cliでプロジェクトを作ったとして、ビルド時にconsole.logを自動で取り除くにはどうしたらいいか。

参考 :

https://forum.vuejs.org/t/remove-console-logs-from-production-buils/39327/21

https://stackoverflow.com/questions/64521243/typeerror-cannot-read-property-javascript-of-undefined-terser-webpack-plugi

terser-webpack-pluginを使う。

webpack5から一緒にインストールされるようだ。しかし自分の環境でvue cliでプロジェクトを作るとwebpackはまだ4だった。なのでバージョンを指定してterser-webpack-pluginインストールする必要があった。

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

次にvue.config.jsファイルを作り設定する

const TerserPlugin = require("terser-webpack-plugin");
const isProd = process.env.NODE_ENV === "production";
// Removal of console log and comments on production build only.
module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true,
      minimizer: isProd
        ? [
            new TerserPlugin({
              terserOptions: {
                compress: {
                  drop_console: true,
                },
                output: {
                  comments: false,
                },
              },
            }),
          ]
        : [],
    },
  },
};