Bundler[Webpack] - babel

01.Babel

• ES5 버전으로 변환시켜주는 컴파일러

02.Babel 설치 & 설정

2-1.패키지 설치 & 확인

$ npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

• babel/core를 포함한 3가지 패키지를 개발 의존성 모듈로 설치해줍니다.

• Package.json

 "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "copy-webpack-plugin": "^9.1.0",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "sass": "^1.50.0",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.0.0-rc.1"
  },
  "dependencies": {
    "autoprefixer": "^10.4.4",
    "postcss": "^8.4.12",
    "postcss-loader": "^6.2.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

2-2..babelrc.js 파일 생성

• .babelrc.js 마침표로 시작하는 rc(runtime configuration) 파일, 즉 구성 파일을 만들어줍니다.
• 마침표로 시작하는 것은 구성 옵션이나 숨김 파일을 의미합니다.

2-3.export

• .babelrc.js 파일 내에 아래 내용을 코딩해줍니다.

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}

• 위 작업으로 프로젝트에서 작성하는 모든 JavaScript는 Babel을 통해 ES5 버전으로 변환되어 브라우저에서 동작하게 됩니다.

2-4.moudle에 babel-loader 삽입

module: {
  rules: [
    {
      test: /\.js$/,
      user: [
        'babel-loader'
      ]
    }
  ]
}

• 위 내용을 코딩하여 main.js와 같이 .js 확장자로 끝나는 JavaScript 파일들을 webpack에서 babel-loader로 읽어들여 Babel이 적용될 수 있도록 명시해주도록 합니다.
• webpack.config.js

// import
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    // filename: "main.js",
    clean: true
  },

  module: {
    rules: [
      {
        test: /\.s?css$/, // .scss 또는 .css확장자로 끝나는 파일을 찾는 정규 표현식
        use: [
          "style-loader", // main.css에 해석된 내용을 삽입하는 패키지
          "css-loader", // JS에서 CSS 파일을 해석하는 패키지
          "postcss-loader", // 공급업체 접두사를 적용해주는 패키지
          "sass-loader"
        ]
      },
      {
        test: /\.js$/,
        use: [
          "babel-loader"
        ]
      }
    ]
  },
  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html"
    }),
    new CopyPlugin({
      patterns: [
        { from: "static" } // static 폴더안에 있는 내용들이 복사되어 dist폴더 안에 들어갈 수 있게 설정하는 옵션
      ]
    })
  ],

  devServer: {
    host: 'localhost'
  }
}

2-5.패키지 설치(2) & 확인

$ npm i -D babel-loader

• babel-loader 패키지를 추가적으로 설치 해줍니다.

• Package.json

{
  "name": "webpack-template-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.4",
    "copy-webpack-plugin": "^9.1.0",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "sass": "^1.50.0",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.0.0-rc.1"
  },
  "dependencies": {
    "autoprefixer": "^10.4.4",
    "postcss": "^8.4.12",
    "postcss-loader": "^6.2.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

03.개발 서버 오픈

• 확인을 위한 간단한 방법으로 main.js 파일에 아래와 같이 비동기 함수를 작성합니다.

import '../scss/main.scss'

console.log("webpack"); 

async function test() {
  const promise = Promise.resolve(123)
  console.log(await promise)
}
test()

$ npm run dev

• Babel이 정상적으로 작동했다면 해당 그림과 같이 콘솔창에 123이 출력된 것을 볼 수 있습니다.