[React] Webpack Production모드에서 Console 출력 방지

안녕하세요. J4J입니다.

 

이번 포스팅은 Webpack Production모드에서 Console 출력 방지하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

Console 출력 방지 설정 방법

 

[ 1. 패키지 설치 ]

 

$ npm install -d terser-webpack-plugin

 

 

 

[ 2. webpack 설정 파일 수정 ]

 

저는 webpack 설정을 위해 webpack.config.js 파일을 사용합니다.

 

해당 파일에 출력 방지를 설정하기 위해 다음과 같이 추가하겠습니다.

 

const TerserPlugin = require('terser-webpack-plugin');

module.exports = (env) => {
    const mode = env.mode || 'development';

    return {
        // 개발모드, development or production
        mode: mode,

        // 최적화 설정
        optimization: {
            minimizer: mode === 'production' ? [
                        new TerserPlugin({
                            terserOptions: {
                                compress: {
                                    drop_console: true // console 출력 방지 설정
                                }
                            }
                        })
                      ]
                    : [] // 빈 배열을 넣어주지 않을 경우 에러 발생
        },
    }
};

 

 

반응형

 

 

[ 3. package.json 파일 수정 ]

 

webpack.config.js에 env 값을 전달하기 위해 package.json scripts를 다음과 같이 수정해줄 수 있습니다.

 

{
  "scripts": {
    "dev": "webpack-dev-server --open --env mode=development",
    "build": "webpack --config webpack.config.js --env mode=production"
  },
}

 

 

 

[ 4. App.tsx 파일 수정 ]

 

Console에 문자열이 출력될 수 있도록 App.tsx 파일을 다음과 같이 수정해보겠습니다.

 

import * as React from 'react';

const App = (): JSX.Element => {

    React.useEffect(() => {
        console.log('console 출력을 테스트해봐요 !!');
    }, [])

    return (
        <div>
            <p>Hello, React!</p>
            <p>Hello, Typescript!</p>
        </div>
    )
}

export default App;

 

 

 

테스트

 

먼저 다음 명령어를 이용하여 개발단계에서 실행해보겠습니다.

 

$ npm run dev

 

 

 

위에서 package.json을 확인해보면 해당 명령어는 development 모드로 실행되기 때문에 다음과 같이 Console 창에 값이 출력되는 것을 확인할 수 있습니다.

 

development 출력

 

 

728x90

 

 

이번에는 build를 한 뒤 실행해보겠습니다.

 

동일하게 package.json을 확인해보면 build는 production 모드로 실행됩니다.

 

그렇기 때문에 다음 명령어를 이용하여 build를 해보겠습니다.

 

$ npm run build

 

 

 

그리고 build 된 파일을 실행하기 위해 VSCode에서 Live Server Extension을 설치하겠습니다.

 

Live Server 설치

 

 

 

마지막으로 build가 이루어진 index.html 파일을 우 클릭하여 Live Server로 실행하겠습니다.

 

Live Server 실행

 

 

 

그러면 다음과 같이 Console 창에 아무것도 출력되지 않는 것을 확인할 수 있습니다.

 

production 실행

 

 

 

 

 

 

 

 

이상으로 Webpack Production모드에서 Console 출력 방지하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.