[VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(3)

바벨을 설정하기에 앞서 바벨에 대해서 알아두면 좋은데,

쉽게 말하면 최신 사양의 자바스크립트 코드 (ES6+)를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링) 시켜주는 녀석이라고 할 수 있다.

실제로 공식 웹사이트에서도 다음과 같이 설명하고 있다.

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. Here are the main things Babel can do for you:

이제 바벨 설정을 하나씩 해보도록 하자.

1. Babel Core 와 Babel Cli 설치

(설치하기 전에 package.json이 당연히 있어야 한다는 점 잊지말자.)

아래 명령어를 통해 설치를 진행해주자.

npm install --save-dev @babel/core @babel/cli

@babel/core : 바벨의 코어 패키지

@babel/cli : 커맨드라인에서 파일을 컴파일하게 해주는 CLI 제공

▷ 결과 (package.json)

아무래도 웹팩과 동시에 진행하다보니 점점 복잡해진다.

2. Babel Preset 설치 및 설정

여기서도 아래 명령어를 통해 설치해주자.

npm install --save-dev @babel/preset-env

@babel/preset-env : Babel플러그인을 모아둔 것으로 Babel프리셋이라고 부른다. 바벨 플러그인은 어떤 코드를 어떻게 변환할 지에 대한 규칙을 나타내는데 그러한 규칙들을 모아둔 것이라고 생각하면된다.

바벨 프리셋의 경우 설치에서 끝나는게 아니라 설정도 같이 해주어야 하는데,

사실 여기서 설정하는 방법이 여러개가 존재한다.

전체 설정 파일인 babel.config.js / babel.config.json 파일을 만들어 설정하는 방법이 있고(바벨 7버전부터 생겼다더라)

지역 설정 파일인 .babelrc 파일과 package.json 에 babel key를 넣어서 설정하는 방법이 존재한다.

여기서 전체 설정과 지역 설정이 겹치는 설정이 존재할 경우 지역 설정으로 덮어진다. (쉽게 전역 변수를 지역변수로 덮는다 생각하면 된다.)

여기서는 그럼 일단 babel.config.json을 만들어 설정하는 법을 배워보도록 하자.

(package.json과 동일한 위치에 만들어주면 된다.)

▷ 결과 1(package.json)

▷ 결과 2(babel.config.json)

3. Babel Loader 설치 및 설정

babel-loader는 웹팩이 모듈을 번들링할 때 바벨을 사용하도록 도와주는 역할이다.

아래 명령어를 통해 설치해주자.

npm install --save-dev babel-loader

설치가 완료됐으면 webmap.config.js로 가서 loader 설정을 진행해주자.

▷ 결과 1(package.json)

▷ 결과 2(webpack.config.js)

const path = require('path');

module.exports = {
    mode: "development",
    entry : "./src/index.js",
    output : { 
        path : path.resolve(__dirname, "bundleBuild"),
        filename : 'build.js'
    },
    module: {
        rules: [
            {
                test : /\.js$/,
                exclude: /node_modules/,
                use : "babel-loader"
            },
            {
                test : /\.css$/,
                use : ["style-loader", "css-loader"]
            }            
        ],
    },
}

자 준비가 끝났으니 이제 웹팩을 빌드하면 어떻게 될까...?