06. Vue 2 - TerserPlugin 을 이용한 웹 팩 설정

OS	Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836)
Vue	2.5.13

 

# 참고

Environment Variables | Cracking Vue.js

 

vue 실행 모드와 환경 변수 설정

 

Vue.config.js 설정

const TerserPlugin = require('terser-webpack-plugin');
const isProd = process.env.NODE_ENV === 'production'

module.exports = {
    /** 서버 설정 */
    devServer: {
        port: 3000,
        proxy: {
            'api/*': {
                target: 'http://localhost:8080'
            }
        }
    },
    /** 웹 팩 설정*/
    configureWebpack: {
        optimization: {
            minimize: true,
            minimizer: isProd ? [
                new TerserPlugin({
                    terserOptions: {
                        ecma: 6,
                        compress: { drop_console: true },
                        output: { comments: false, beautify: false }
                    }
                })
            ] : []
        }
    },
    /** 플러그인 옵션 */
    pluginOptions: {
        i18n: {
            locale: 'kor',
            fallbackLocale: 'kor',
            localeDir: 'locales/messages',
            enableInSFC: false
        }
    },
}

 

development, test, production 모드가 있는 데 기본모드는 development 이다

production 모드 인 경우 console.log 구문은 모두 제거되어 빌드 된다

 

# env 설정법

[방법1] 터미널 창

npm run serve --mode production

 

[방법2] package.json 

 

[방법3] 인텔리제이 창