[VueJS] vue 프로젝트에서 webpack 설정하는 방법 (vue-cli 와 webpack)

초기 세팅

우선 webpack 설정에 대해 알아보기 위해 vue-cli를 이용한 vue 프로젝트가 만들어져야 한다.

 

[VueJS] VSCode에서 개발환경 세팅하기 (ft. node.js / vue-cli)

[VueJS] VSCode에서 개발환경 세팅하기 (ft. node.js / vue-cli)

 

vue 프로젝트에서 이제 webpack설정을 하기 앞서 vue-cli의 버전이 몇인지부터 알아야 한다.

아무래도 아주 예전부터 사용하던 vue 프로젝트가 아닌 이상 기본적으로 vue/cli 3.0 버전 이상은 갖췄을 거라 생각된다.

 

웹팩설정

vue/cli 3 버전부터 webpack.config.js 파일이 없어졌는데,

그 이유는 웹팩 기본 설정이 vue/cli-service에 들어가 있기 때문에 외부로 노출되어 있지 않기 때문이다.

(vue/cli 3.0 버전 미만은 webpack.config.js 파일이 존재하기 때문에 그냥 거기서 작업하면 된다.)

 

webpack.config.js파일이 없는데 그러면 우리는 어디다가 웹팩 설정을 해줘야 하는가?

그건 vue/cli-service를 가져다가 사용하고 있는 vue.config.js에서 설정해주면 된다.

 

vue create를 통해 프로젝트를 만들면 아래와 같이 기본 설정이 되어있을 것이다.

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
});

바로 여기서 작업을 해주면 된다.

vue.config.js 가이드를 참고해서 작업을 해주도록 하자. (본문 하단 링크 참조)

 

초기 웹팩 설정 확인하기

본문에서 웹팩 설정이 기본적으로 vue/cli-service에 들어가 있다고 하였는데,

웹팩 설정을 본격적으로 하기 전에 이 초기 설정이 어떻게 되어 있는가 부터 확인하는 게 맞다고 생각된다.

 

터미널에 다음과 같은 명령어를 입력해보자.

vue inspect > output.js

그러면 이제 저 output.js라는 파일이 생성됐을 텐데,

그 파일을 열어보면 자동적으로 초기 설정 되어있는 웹팩 설정을 볼 수 있다.

---

참고: https://cli.vuejs.org/guide/webpack.html

Working with Webpack | Vue CLI

참고: https://cli.vuejs.org/config/#vue-config-js

Configuration Reference | Vue CLI