walk diagonally

基本的にはプログラミングの話のつもり。フロントエンドよりです。

Vue CLI3のproductionでconsole.logを消した方法

やりたかったこと

本題の通りなのですが、productionの状態でbuildしたソースからよろしくconsole.logを消せないかなと思ったのでいろいろ調べてみました。

結論

uglifyjs-webpack-plugin を入れて、vue.config.jsにconsole.logを消す設定を書く。

pluginのインストール

npm i -D uglifyjs-webpack-plugin

vue.config.jsに書き足す

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProd = process.env.NODE_ENV === "production";
module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: isProd ? [
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_console: true
            },
          }
        })
      ] : []
    }
  }
}

こちらで発見しました

forum.vuejs.org

所感

これを試したのは個人的につくった実装物なので、一旦これでいいんですが、もう少し大きい実装で、コードを難読化したら発生したbugとかに関してはlogがでなくてちょっとつらいのかなと思いました。
もう少しいろいろ設定ができそうなので、折を見て試して追記できたらと思います