Vue3 - 웹팩(Webpack)은 무엇이고 설정은 어떻게

Vue.js는 브라우저에서 실행되는 사용자 인터페이스를 구축(빌드)할 수 있는 프레임워크이다. 사용자 인터페이스/웹 앱을 만든 이후에는 효율적으로 배포하기 전에 빌드해야 한다. 여기에서 웹팩(webpack)이 등장. 웹팩(webpack)은 작성한 코드를 가져와 모든 브라우저와 호환되는 버전을 출력하고 사용자가 전체 애플리케이션을 한 번에 로드하지 않도록 코드가 청크로 올바르게 스플리트 되었는지 확인한다. 이것이 웹팩의 역할과 Vue.js와의 관계를 설명한다.

💡 코드 스플리트의 꽃인 코드를 비동기적으로 불러오는 작업을 하는데 웹팩에서 처리를 하면서 코드를 분리시키는데, 이것을 "청크(chunk)"라고 부른다.

웹팩은 최신 프런트엔드 빌드 시스템의 핵심이 되는 빌드 도구이다. 웹팩 핸드북을 참고

웹팩이란

최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)

모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, JS, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합하여 하나의 파일(JS) 결과물로 배포할 수 있는 도구.

<모듈 번들링 이미지 참고>

프로젝트 구조

vue create first-project

vue-CLI로 프로젝트를 생성하게 되면 아래의 구조와 같이 생성한다.

그런데 webpack.config.js 파일이 보이지 않는다.

아, Vue CLI 버전 2 이하에서는 웹팩 설정 파일이 프로젝트 루트에 노출했지만, 웹팩이 부담된 사용자들(이전의 나 포함)이 있었어서 Vue CLI 3 이상부터 웹팩 설정 파일을 vue-cli-service라는 이름으로 숨겨놓았다.

찾아가보자..

root
	- node_modules
		- @vue
			- cli-service

웹팩 옵션 속성 살펴보기

위 처럼 vue-cli-service까지 들어와서 웹팩 설정 파일을 보는 건... 쉽지 않다.

이를 위한 명령어, 프로젝트 루트 터미널에서 입력한다.

vue inspect > options.js

그럼 설정된 옵션들을 볼 수 있다.

웹팩 설정

vue.config.js를 연다.

outputDir를 추가하여 빌드하면 생성되는 청크 경로를 지정한다.

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

    outputDir: 'dist',
    /* webpack config 옵션 추가 */
    configureWebpack: {
        plugins: [
        ]
    },

    /* 옵션 체이닝 */
		chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // mutate config for production...
        } else {
            // mutate for development...
        }
    }
})

configureWebpack 값에는 애플리케이션에 필요한 플러그인을 추가할 수 있다.

chainWebpack: config => { ... }는 체이닝(Chaining)이다.

내부 webpack 구성은 webpack-chain을 사용하여 유지 관리되며, 라이브러리는 로더 규칙과 플러그인을 정의한다. 그리고 아래 코드에서는 .tap() 메소드안에 옵션을 수정 후 리턴시켜 옵션을 제어한다.

chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .tap(options => {
          // 옵션 수정...
          return options
        })
}

💡 CSS 관련 로더는 chainWebpack에서 설정하는 것 보다 css.loaderOptions 문서의 예문을 보고 여기서 지정하는 것이 낫다.