[Webpack][Babel] Webpack 과 Babel

웹 개발을 하던 중 , Webpack 과 Babel 에 대해 많이 듣게 되었는데 , 매일 듣기만 하고 정확히 무슨 일을 하는지 몰라서 따로 한번 정리해보려고 게시물을 작성했다. 

 

왜 사용하는가 ?

 

https://kangax.github.io/compat-table/es6/

브라우저별 ES6 지원 현황

크롬, 사파리 등 에버그린 브라우저(웹 표준을 위해 지속적으로 자동 업데이트를 지원하는 모던 브라우저)는 대부분의 ES6 사양을 지원한다. 하지만 IE 11은 거의 ES6를 지원하지 않는다. 또한 , ES6가 새롭게 도입될 때마다 브라우저 지원율이 각각 다를 수밖에 없다. 그래서, 최신 사양으로 작성된 코드를 구형 브라우저에서 동작시키기 위한 개발 환경을 구축하고 , 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더가 필요하다. 물론 ES6 모듈이 존재하기는 하지만 , 아직까지는 별도의 모듈 번들러인 Webpack을 사용하는게 일반적이다.

 

Babel

 

대표적인 트랜스파일러로 , ES6 의 최신 버전으로 구현된 소스코드를 IE 같은 구형 브라우저에서 동작하는 사양의 소스코드로 변환해준다 . 즉 , 최신사양으로 작성 해도 지원하지 않는 구형 브라우저에서 작동한다는 말이다.

 

Babel 설치

// package.json 생성
npm init -y
// babel-core, babel-cli 설치
npm install --save-dev @babel/core @babel/cli
// babel/preset-env 설치
npm install --save-dev @babel/preset-env

// preset-env를 설치해야 babel이 사용가능하다 . 
// preset-env가 필요한 플러그인들을 프로젝트 지원 환경에 맞춰 동적으로 결정해줌.

이렇게 설치하게 되고 , package.json을 보게 되면

{
  "name": "webpack-babel",
  "version": "1.0.0",
  "devDependencies": {
    "@babel/cli": "^7.17.6",
    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11"
  }
}

이렇게 완성이 되어있다. 그리고 프로젝트의 루트 폴더에 babel.config.json 설정 파일을 만든다.

{
  "presets": ["@babel/preset-env"]
}

 

트랜스 파일링

소스 코드를 트랜스파일링 할 때 , Babel Cli 명령어를 사용해도 되지만 트랜스파일링 때마다 입력하는 것은 비효율적이므로 , npm scripts에 명령어를 등록하는 것이 합리적이다.

{
  "name": "webpack-babel",
  "version": "1.0.0",
  "scripts": {
    "build": "babel src/js -w -d dist/js"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.6",
    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11"
  }
}

npm script의 build시 src/js 폴더의 모든 파일을 트랜스 파일링 한 후 , 그 결과물을 dist.js의 저장한다는 뜻이다.

• -w : 타깃 폴더의 모든 자바스크립트 파일들의 변경을 감지하여 자동으로 트랜스파일링 한다.
• -d : 트랜스 파일링된 결과물이 저장될 폴더를 지정한다 . 폴더가 없다면 자동으로 생성한다.

 

Webpack

https://webpack.js.org/

Webpack

Webpack은 의존 관계에 있는 JS , CSS , img 등의 리소스를 하나(또는 여러개)의 파일로 번들링하는 모듈 번들러이다. 

• 자바스크립트 파일을 하나로 번들링해서 HTML 파일에서 script 태그로 여러개를 로드해야하는 번거로움도 없어진다.
• 많은 파일들을 다운받으면 네트워크 부하가 커지고 느려지고 , 충돌 가능성이 있다.

즉 , 번들러를 사용하면 여러개의 파일을 하나로 묶어줘서 네트워크 부담을 줄이고 , 빠르게 서비스 할 수 있다는 장점이 있다.

 

Webpack 설치

npm install --save-dev webpack webpack-cli

 

@babel-loader 설치

Webpack이 모듈을 번들링할 때 , Babel을 사용해서 트랜스파일링 하도록 설치한다.

npm install --save-dev babel-loader

 

이후 완성된 package.json은

{
  "name": "webpack-babel",
  "version": "1.0.0",
  "scripts": {
    "build": "babel src/js -w -d dist/js"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.6",
    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2"
  }
}

 

webpack.config.js

webpack.config.js은 Webpack이 실행될 때 참조하는 설정 파일이다. 프로젝트 루트 폴더에 만든다.

const path = require("path");

module.exports = {
  entry: "./src/js/main.js",
  // entry file

  output: {
    path: path.resolve(__dirname, "dist/js"),
    filename: "bundle.js",
  },
  // 번들링된 js 파일의 이름과 저장될 경로 지정

  module: {
    rules: [
      {
        test: /\.jsx?/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
        },
      },
    ],
  },
  devtool: "source-map",
  mode: "development",
};

 

이렇게 세팅하고 webpack을 실행하게 되면 , babel이 트랜스파일링을 ,  webpack이 번들링을 수행하게 해준다. dist/js 폴더 안에 bundle.js가 생성되는데, 이 파일이 번들링 된 결과물이다.