Webpack, Babel 의 이해와 기본 설정

JavaScript 를 이용하여 개발하다보면 webpack 과 babel 에 대해 자주 접할 수 있습니다.

webpack 과 babel 에 대해 이해하고 함께 사용하기 위해 설정하는 방법에 대해 알아보도록 하겠습니다.

추가적으로 다음 포스트에서 아래의 내용을 다루겠습니다.

1. 절대 경로 설정 추가 (Path Alias)
2. JavaScript, Json 파일 외의 파일 번들링 (CSS, SASS, PNG 등)

 

---

Webpack 이란?

Webpack 공식 문서에는 아래와 같이 소개하고 있습니다.

webpack 의 공식 홈페이지는 한글 번역도 지원이 되어 읽기 수월합니다.

이후 추가적인 필요사항은 해당 페이지에서 직접 쉽게 찾아볼 수 있습니다.

webpack is a static module bundler for modern JavaScript applications.
webpack은 모던 자바스크립트 애플리케이션을 위한 정적 모듈 번들러입니다.

다시 말해 자바스크립트의 여러 파일들을 하나의 파일로 합치는 번들러입니다.

 

사용 이유

개발자들은 개발자간 수월한 커뮤니케이션, 코드의 재활용, 유지·보수 등 여러 이유로 코드를 여러 파일로 분리하여 개발을 진행합니다.

자바스크립트 또한 위의 이유들로 코드를 모듈로 구분하여 개발을 진행합니다.

 

이렇게 여러 파일로 구분하면 위의 장점들이 존재하지만, 프론트엔드에는 단점도 존재합니다.

브라우저가 해당 사이트를 접속하면 HTML, CSS, JS, 이미지 등 수 많은 데이터를 가져오게 됩니다.

이때 자바스크립트를 모듈화로 여러 파일이 존재한다면 필요한 수 십 ~ 수 백개의 파일을 모두 가져와야하는 경우가 생겨 시간이 지연되는 경우가 발생합니다.

이러한 단점을 보완하기 위해 webpack 을 사용하여 여러 파일을 번들링하여 하나의 파일로 합칠 수 있습니다.

 

장점

위의 사용 이유 외에도 아래의 장점들도 있습니다.

1. webpack 의 loader 를 이용하여 필요한 여러 기능들을 이용할 수 있습니다.
2. 배포 모드를 이용하여 코드를 압축, 난독화가 가능합니다.

 

Babel 이란?

Babel 공식 문서에는 아래와 같이 소개하고 있습니다.

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

바벨은 JavaScript 컴파일러로 문법 변환, 폴리필 기능 지원 (core-js), 소스 코드 변환 등의 기능을 지원합니다.

 

사용 이유

자바스크립트는 과거에 비해 많은 내용들이 추가되며 발전되고 있습니다.

또한 사용자들이 이용하는 브라우저는 크롬, 사파리, 파이어폭스, IE 등 여러 브라우저가 존재합니다.

브라우저들 마다 지원하는 자바스크립트 문법이 다르기 때문에, 어떤 내용의 코드는 작동하지 않고 에러가 발생하는 경우가 존재합니다.

이럴때 브라우저가 지원 가능한 과거의 문법으로 변환하여 다양한 브라우저 환경에서도 정상적으로 동작하도록 코드를 변환하기 위해 사용합니다.

 

 

Webpack 설치 및 설정

webpack 은 webpack 사용을 위한 기본적으로 필요하고, webpack-cli 는 번들링 실행을 위해서 필요합니다.

npm install -D webpack webpack-cli

설치 관련 공식 문서

설정 관련 공식 문서

 

 

webpack 은 4버전 부터 기본적으로 설정 파일이 존재하지 않아도 괜찮습니다.

그러나 세부적인 설정을 위해서는 설정 파일이 필요합니다.

설정 파일은 webpack.config.js 입니다.

 

설정에 필요한 기본적인 정보들은 아래와 같습니다.

구분	설명
Entry	여러 모듈로 분리된 파일들 중 번들링을 위한 가장 최상단의 파일을 선택합니다. (종속성 그래프 생성을 위해 시작되는 파일입니다.)
Output	번들링 과정이 이루어진 파일이 저장되는 위치 및 파일명을 설정합니다. 일반적으로 dist 폴더에 생성합니다.
Loaders	webpack 은 기본적으로 JavaScript 와 json 파일만 이해할 수 있습니다. 이 외에 다른 유형(css, babel 등)의 파일들을 처리하기 위해 사용합니다. 설정 파일에서 module 이라는 키값을 이용합니다.
Plugins	번들 파일을 최적화, 환경 변수 주입 등 작업을 수행합니다.
Mode	값으로 development, production, none 으로 설정이 가능합니다. 값에 따라 최적화를 활성화 가능하며, 기본값은 production 입니다.

 

Babel 설치 및 설정

@babel/core 는 babel 을 이용하기 위하여 필요하고, @babel/cli 는 babel 의 명령어를 사용하기 위해 필요합니다.

@babel/preset-env 는 컴파일되는 브라우저의 환경을 선택하기 위해 필요합니다.

npm install -D @babel/core @babel/cli @babel/preset-env

설치 관련 공식 문서

 

 

설정 파일은 babel.config.* (.json, .js, .cjs, .mjs) 와 .babelrc.* (.json, .js, .cjs, .mjs) 가능합니다.

주의할 점은 babel.config.json 은 7.8 버전 이후부터 사용 가능합니다.

 

설정에 필요한 기본적인 정보는 아래와 같습니다.

구분	설명
plugins	플러그인을 추가할 수 있습니다. 바벨의 코드 변환은 추가한 플러그인을 기반으로 진행됩니다. 플러그인 하나는 작게 이루어져 있어 특정 작업을 위해 많은 플러그인을 추가해야합니다.
presets	특정 작업을 위해 여러 플러그인을 모아 놓은 집합입니다. 여러 플러그인을 매번 추가하지 않고, 하나의 프리셋을 추가하여 편리하게 설정 할 수 있습니다. 대표적으로 preset-env 가 있습니다.

 

Webpack 과 Babel 함께 설정하기

webpack 과 babel 중 하나만 사용하기 보다는 함께 사용하는 경우가 많습니다.

같이 사용하기 위해서는 babel-loader 를 추가적으로 설치해야합니다.

그리고 babel 의 명령어를 따로 사용하지 않을 예정이므로 위에서 설치했던 @babel/cli 는 필요하지 않습니다.

npm install -D babel-loader

 

 

 

기본적인 설정은 아래와 같습니다.

// webpack.config.js

const path = require('path');

export default {
  entry: "./src/index.js",			// 번들링 할 최상단 파일
  output: {									
    filename: "index.js",			// 번들링 된 파일의 이름
    path: path.resolve(__dirname, "dist"),	// 번들링 된 파일의 위치
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",		// babel 을 함께 사용하기 위해 추가
          options: {				// babel 의 설정
            presets: [
              [
                "@babel/preset-env",		// 문법 변환할 브라우저 환경 프리셋
                {
                  targets: [">= 1% in KR"],	// 프로젝트에 맞게 변경해주시면 됩니다.
                },
              ],
            ],
          },
        },
      },
    ],
  },
  mode: "development",		// 개발 모드
};

babel 의 설정 내용을 webpack.config.js 에서 함께 사용하므로 babel.config.json 파일은 생성하지 않아도 됩니다.