Vue CLI 3 웹팩(Webpack) 설정 작업하기

Vue-cli 3로 생성한 프로젝트에 vue.config.js 파일이 없습니다. 아래 설정을 하려면 해당 파일을 프로젝트 폴더에 생성하면 됩니다. 혹시 반드시 webpack.config.js에 설정해야 하는 상황이면 제일 하단부 '웹팩 설정 파일 접근하기'를 참고하세요 :) 

간단한 설정

---

가장 간단하게 웹팩 설정을 할 수 있는 방법은 vue.config.js 파일에 configureWebpack 옵션을 추가하는 것입니다.

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

이 객체는 최종적으로 웹팩 설정에 합쳐집니다. 이 때 webpack-merge가 사용됩니다.

 

경고
vue.config.js 에 작성하는 웹팩 관련 설정 옵션명에 주의하세요.
output.path -> outputDir
output.publicPath -> publicPath

vue.config.js의 옵션들이 다양한 곳에서 사용되기 때문에 이러한 규칙을 유지합니다.

 

배포용, 개발용 환경인지에 따라 다르게 동작하고 싶거나 설정을 직접 변환하고 싶을 때에는 함수를 씁니다. 함수 안에서 설정 객체를 직접 변환하거나, 또는 변환하지 않고 그냥 반환하면 됩니다.

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
    } else {
      // mutate for development...
    }
  }
}

 

Chaining (Advanced)

---

webpack-chain이라는 라이브러리를 소개합니다. 웹팩 설정을 손쉽게 바꿔주는 라이브러리로 내부 웹팩 설정을 섬세하게 다룰 수 있습니다.

 

 

Loader 옵션 변경하기

 

아래와 같이 chainWebpack 옵션 안에서 vue-loader 로더를 사용한다는 설정과 함께 세부 옵션까지 변경할 수 있습니다.

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // modify the options...
          return options
        })
  }
}

 

Tip
CSS 관련 로더는 webpack-chain을 사용하지 않고 css.loaderOptions를 사용하는 것이 권장됩니다. 왜냐하면 CSS 파일 타입에 대한 여러 규칙이 있고 css.loaderOptions가 한 곳에서 모든 규칙에 영향을 줄 수 있기 때문입니다.

 

https://cli.vuejs.org/guide/webpack.html#adding-a-new-loader 

Working with Webpack | Vue CLI

위 링크에서 webpack-chain을 이용해서 새로운 로더를 추가, Base Loader에 정의되어 있는 기본 설정을 대체하는 방법, 플러그인 옵션을 수정하는 방법을 살펴볼 수 있습니다.

 

웹팩 설정 파일 접근하기

---

어떤 IDE나 명령어 툴들은 적용되어 있는 웹팩 설정 파일(webpack.config.js)에 접근해야 하는 경우가 있습니다. 그럴 땐 하위 경로의 파일을 수정하면 됩니다.

<projectRoot>/node_modules/@vue/cli-service/webpack.config.js

실제로 위 경로의 webpack.config.js 파일에 vue-cli로 생성한 프로젝트의 웹팩 설정이 담겨 있지 않지만, vue-cli-service 명령어를 통해서  수정 내용이 최종 웹팩 설정으로 합쳐집니다.