Vue Webpack 설정 - vue.config.js

 

Vue Cli 3.x 부터는 config파일이 없습니다.

직접 vue.config.js 파일을 만들어야 합니다.

 

vue.config.js가 필요한 이유는, 개발, 운영등 빌드 환경과 빌드 옵션을 추가하기 위해 사용합니다.

 

구성은 아래와 같습니다.

기본 빌드 환경 + 각 빌드 환경 + 각 빌드 환경 변수

 

1. 기본 빌드 환경 파일 : vue.config.js

 

2. 각 빌드 환경 파일: dev.config.js, prd.config.js...

 

3. 각 빌드 환경 변수 : .dev.env, .prd.env ...

 

---

vue.config.js

const path = require('path')
const merge = require('webpack-merge')
 
const buildConfig = process.env.NODE_ENV === 'prd' ? require('./config/prd.config.js') : require('./config/dev.config.js')
// 빌드 모드의 따른 웹팩 설정
 
module.exports = merge(buildConfig, {
  outputDir: 'dist',
  configureWebpack: {
    output: { // 빌드시마다 js파일명 변경
      filename: 'js/[name].[hash].js',
      chunkFilename: 'js/[id].[hash].js' 
    },
    resolve: {
      alias: {       
        '@': path.join(__dirname, 'src/')     
      }
    }
  }
})

 

 

config/dev.config.js

// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
module.exports = {
  productionSourceMap: true,
  lintOnSave: true,  
  configureWebpack: {
    // plugins: [new BundleAnalyzerPlugin()] // 분석시 사용
  },
  css: {
    sourceMap: true
  }
}

 

config/prd.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
module.exports = {
  productionSourceMap: false,
  lintOnSave: false,  
  configureWebpack: {
    optimization: {
      minimizer: [new UglifyJsPlugin()] // js minify
    }
  },
  css: {
    sourceMap: false
  }
}

 

.env.dev

NODE_ENV = "dev"
 
변수명 = 변수값

 

.env.prd

NODE_ENV = "prd"
 
변수명 = 변수값

 

---

build 환경에 따른 package.json 설정 :--mode 환경명

"scripts": {
    "dev": "vue-cli-service serve --mode dev",
   ...