[VUE] 배포시 console.log 제거하기

개발 할 때 console.log를 사용하여 많은 걸 확인한다.
하지만 배포하게 되면 이걸 안보이게 해야한다.
그래서 로컬이나 데브에서는 컨솔을 보이게 하고 배포해서 상용 한 곳에서는 안보이게 하려고 한다.
TerserPlugin 사용해서 진행 해보겠습니다.

먼저, TerserPlugin을 설치합니다.

뷰를 cli을 사용하여 만들었으면 package.json에는 안보이지만 설치가 되어있습니다.

npm 일 때
npm list terser-webpack-plugin 으로 확인 하시고 없으시면
npm install terser-webpack-plugin 설치하시면 됩니다.

yarn 일 때
yarn list terser-webpack-plugin 으로 확인 하시고 없으시면
yarn add terser-webpack-plugin 설치하시면 됩니다.

설치를 다 하셨으면 그 다음으로

vue.config.js 파일을 수정 해줍니다.

const { defineConfig } = require("@vue/cli-service");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = defineConfig({
  transpileDependencies: true,

  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") { // 빌드를 하면 production으로 됩니다
      // 기존의 minimizer 설정이 있다면 그대로 사용하고, 없다면 빈 배열을 할당
      config.optimization.minimizer = config.optimization.minimizer || [];

      // TerserPlugin을 추가
      config.optimization.minimizer.push(
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true, // 콘솔 로그를 제거합니다.
            },
            output: {
              comments: false, // 빌드 파일에서 주석을 제거합니다.
            },
          },
          extractComments: false,
        }),
      );
    }
  },
});

이제 끝났습니다.

빌드를 하시면 console.log가 제거 된 걸 확인 하실 수 있습니다.