웹팩 바벨 설치 및 활용 webpack에서 babel이 필요한 이유는?

 

이전 포스팅에서는 HTML, Javascript, css 파일을

웹팩에서 배포 시 압축하는 방법을 알아보았습니다

 

혹시 못보신분이 계시다면 아래의 링크를 통해 보실 수 있습니다

2022.08.02 - [IT_Web/Webpack] - 웹팩 CSS와 html 및 webpack 활용해서 JS파일 압축하기

웹팩 CSS와 html 및 webpack 활용해서 JS파일 압축하기

 

---

 

 

바벨(babel)이란?

 

바벨은 자바스크립트의 컴파일러입니다

그래서 최신버전의 자바스크립트 코드를 이전 버전의 코드로 변환시켜주는 도구입니다

하지만 몇몇 사람들은 이전 버전으로 코드 변환이 왜 필요한지에 대해 의문을 가지기도 합니다

 

그 이유는 우리가 사용하는 브라우저의 버전에 따라 자바스크립트의 호환 안될 수도 있기 때문입니다 

아래는 자바스크립트 함수인 map입니다

보시면 브라우저 별로 버전에 따라 호환되는 것이 다를 수 있기 때문입니다

그래서 만약 사용자의 버전이 낮거나 한다면 에러가 발생하게 됩니다

그렇기 때문에 바벨로 이전 버전의 낮은 버전으로 변경하여

모든 사용자 사용하기 위함입니다

 

그럼 본론으로 바벨 설치 및 설정법을 알아보겠습니다

 

https://caniuse.com/

바벨이 필요한 이유

 

 

---

 

바벨의 라이브러리 종류 및 설치

• @babel/core : 바벨 사용 시 필수 라이브러리
• @babel/preset-env : ES5 트랜스 파일러
• @babel/polyfill : ES6 새로운 객체와 메서드 사용 처리
• @babel/plugin-proposal-class-properties : Class 사용 가능 처리
• babel-loader : 바벨과 웹팩을 이용해 자바스크립트 파일을 트랜스파일

 

 

바벨에 필요한 라이브러리를 설치하도록 하겠습니다

npm i --save-dev @babel/core @babel/preset-env @babel/polyfill
npm i --save-dev babel-loader

 

 

반응형

---

 

바벨(babel) 설정하기

 

 

 

.babelrc 라는 파일을 만들게 됩니다

위의 파일명 babelrc 앞에 (. ) 콤마가 존재하는걸 꼭 확인하세요

 

 

.babelrc

{
 "presets": ["@babel/preset-env"],
 // 아래 플러그인 설치할 경우 추가
 // "plugins": ["@babel/plugin-proposal-class-properties"]
}

 

 

 

webpack.common.js 파일에 rules를 추가해줍니다

 

module.exports = {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ["html-loader"],
      },
      {
        test: /\.(svg|png|jpg|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name].[hash].[ext]",
            outputPath: "imgs",
          },
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      }, // 추가 부분
    ],
  },
};

 

 

아래와 같은 추가 부분의 뜻은

노드 모듈에 있는 자바스크립트 파일은 제외를 하고 

모든 js파일은 바벨을 적용하겠다는 rules를 추가한다는 뜻입니다

 

바벨 적용 코드

 

아래와 같이 function, var을 확인할 수 있습니다

이렇게 낮은 버전도 사용할 수 있는 코드들로 변환시켜

사용자의 범용성을 키우는 기능이라고 할 수 있다

 

바벨이 적용된 js 배보 파일

 

---

 

 

이렇게 바벨을 설치하고 설정하는 방법을 알아보았습니다

바벨은 정말 필수이니까 바벨이 무엇인지

어떤 동작을 하는지는 꼭 알아두어야겠지요?

 

그럼 지금까지 바벨의 설치 및 설정 방법 그리고 바벨이 필요한 이유까지 알아보았습니다.

인프라적인 요소가 있지만 이러한 환경설정을 하는 것도 필요한 부분이 많습니다

알아두면 언젠가는 필요한 날이 있을 거라 생각합니다

 

그럼 지금까지의 대모험은 끝이 났습니다

하지만 앞으로도 수많은 대모험이 기다리고 있으니

파이팅 하시고

같이 앞으로 나아가 보아요!

 

그럼 다음 포스팅도 기대해주세요~