[etc] Babel사용과 Webpack에 로더 셋업하기

안녕하세요, 늘 부족하지만 아는 것을 공유하는 AlbertKo입니다!

이번엔 저번에 쓴 Webpack 글에 이어서  babel-loader 에 대해서 써보도록 하겠습니다.

babel이란

바벨이란 Javascript의 컴파일러이며, ES 버전에 따른 트랜스파일러 (Transpiler) 입니다.

ECMAScript 2015+ 에 버전을 ES5로 변경해주므로서, 브라우저에서 최신 ES Spec을 지원하지 않는 문제를 해결할 수 있습니다.

babel과 babel-loader 설치하기

webpack을 글로벌로 설치했다고 생각하고 프로젝트에서 npm으로 다음과 같이 설치해줍시다.

npm i -D babel-loader @babel/core @babel/preset-env

설치하셨으면 webpack.config.js 에 loader 설정을 해줍시다.

const path = require('path');

module.exports = {

entry : "./index.js",

output : {

path : path.resolve(__dirname + "dist"), // 현 위치에 dist 디렉토리에 위치

filename : "webpack.bundle.js" // 번들링 된 파일 이름

},

module : {

rules : [

{

test: /\.m?js$/,

exclude: /(node_modules|bower_components)/,

use: {

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env']

}

}

},

]

}

}

위와 같이 해주시면 loader 설정 완료입니다 ㅎㅎ 바벨 설정 옵션을 추가하고 싶으시다면 presets 밑에 plugins : [] 형대로 추가해주시면 됩니다.

그리고 babel에 대한 설정을 해줘야하는데, 웹팩을 쓰지 않을시에는 .babelrc 에서 해줍니다.

'rc의 의미는 명령문이 실행될 때 어떻게 실행되어야 하는지 설정해주는 파일을 의미하는거같아요, rc의 풀네임은 명확하게 정의되어있는거 같진 않지만 Runtime Configuration과 같은 의미로 사용된다고' 프론트엔드 개발자 오픈톡에 Jhon님이 친절하게 설명해 주셨어요!

babel-loader을 보면 .babelrc에 설정을 안하고 options 내에 설정해준 것을 볼 수 있습니다.

그래서 저도 헷갈리는 부분이, .babelrc 에 설정 부분을 온전히 options 내에서 작성해 .babelrc 작성을 안해도 되는 것인지가 헷갈리더군요

일단 babel-loader 내에 설명을 읽어보면 ' .babelrc를 사용했을 경우'라는 문구를 봤을 때 .babelrc에 설정을 작성하는 것은 선택인걸로 보여요.

확실하게 아시는 분 계신다면 알려주시면 감사하겠습니다 ㅋㅋ (설명글에서 질문하는 클라스... ㅜ)

여튼 결론은 당장에 options 내에 설정을 해도 이상이 없습니다.

Polyfill

하지만, 위에대로만 한다면 문제가 있습니다. 문법적인 부분은 이정도로도 해결이 가능하지만, ES 최신 spec에 추가된 built-in 내장 객체를 사용하려고 한다면 문제가 됩니다.

es5엔 이를 대체해줄 객체가 없기 때문이죠.

그를 위해서 Polyfill을 사용하면 됩니다. 우선 설치를 해줍니다.

npm i -D @babel/polyfill

그 후에, 간단합니다.

webpack 설정에 entry 부분을 다음과 같이 변경해주면 됩니다.

const path = require(path);

module.exports = {

entry : ["@babel/polyfill", "./index.js"],

output : {

path : path.resolve(__dirname + "dist"), // 현 위치에 dist 디렉토리에 위치

filename : "webpack.bundle.js" // 번들링 된 파일 이름

},

module : {

rules : [

{

test: /\.m?js$/,

exclude: /(node_modules|bower_components)/,

use: {

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env']

}

}

},

]

}

}

이렇게 해주면 웹팩에 바벨에 대한 셋업이 끝납니다 ㅎㅎ

다음번에는 웹팩 사용에 대해 좀 더 Depth 있는 자료를 들고오도록 노력하겠습니다.

읽어주셔서 감사합니다.