본문 바로가기
SPA/React

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

by J4J 2022. 3. 4.
300x250
반응형

안녕하세요. 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 출력 방지하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.

 

 

 

728x90
반응형

댓글