[웹팩] webpack.config.js VS vue.config.js

Vue CLI로 생성한 프로젝트의 웹팩인 webpack.config.js와 vue.config.js 의 차이를 적어보려 한다.

 

 

Vue CLI로 생성한 프로젝트와 웹팩의 관계?

실제 서비스를 만들기 위해 뷰 CLI를 이용해서 프로젝트를 생성했다.

이렇게 생성된 뷰 프로젝트는 웹팩을 기반으로 동작합니다. (웹팩은 최신 프런트엔드 빌드 시스템의 핵심이 되는 빌드 도구이다!)

npm run serve : 로컬 서버를 웹팩 데브 서버로 실행
npm run build : 웹팩으로 최종 결과물 변환(빌드)

 

 

webpack.config.js와 vue.config.js의 차이?

뷰 CLI 버전 2 이하에서는 웹팩 설정 파일(webpack.config.js)이 프로젝트 루트 레벨에 노출되어 있었다.

하지만 뷰 CLI 버전 3 이상부터는 웹팩 설정 파일을 아래와 같이 vue-cli-service라는 이름으로 감추어 놓았다.

webpack.config.js

// 폴더위치

src
node_modules
  @vue
    cli-service
...

 

 

따라서 해당 버전 이상부터 프로젝트의 웹팩 설정을 수정하고싶다면 vue.config.js파일을 변경하면 된다. 

 

웹팩 변경을 위해 Vue의 공식 가이드를 참고하면 될듯 하다!

https://cli.vuejs.org/config/

Configuration Reference | Vue CLI