목차
개요
ES6 이상의 JavaScript 문법을 사용하면, 일부 브라우저에서는 지원하지 않는 경우가 있습니다. 이를 해결하기 위해 폴리필(polyfill)을 사용할 수 있습니다. 폴리필은 런타임에 브라우저가 해당 기능을 지원하지 않을 때 필요한 코드로 변환해주는 역할을 합니다.
Webpack은 모듈 번들러로써, 다양한 기능들을 제공하고 있습니다. 이번 포스트에서는 Webpack을 사용하여 폴리필을 적용하는 방법에 대해 알아보겠습니다.
Webpack 설정
Webpack을 사용하기 위해 먼저 프로젝트에 Webpack을 설치해야 합니다. 아래 명령어를 사용하여 Webpack을 설치합니다.
npm install webpack webpack-cli --save-dev
Webpack을 설치한 후, webpack.config.js 파일을 생성하여 Webpack의 설정을 작성합니다.
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
위 설정에서 ./src/index.js 를 entry 로 지정하고, bundle.js 로 번들링된 파일을 ./dist 에 생성합니다.
Babel과 폴리필
Webpack은 기본적으로 ES6 이상의 JavaScript 문법을 지원하지 않습니다. 따라서 Babel과 함께 사용하여 최신 문법을 ES5로 변환해줘야 합니다. 또한, 폴리필을 적용하기 위해 @babel/preset-env 패키지도 설치해야 합니다.
npm install @babel/core babel-loader @babel/preset-env --save-dev
Babel 설정 파일인 .babelrc 파일을 생성하고, 다음과 같이 설정을 추가합니다.
{
"presets": ["@babel/preset-env"]
}
위 설정에서 @babel/preset-env를 프리셋으로 사용하도록 지정합니다.
Webpack 플러그인 설치
폴리필을 적용하기 위해, Webpack에 babel-loader 플러그인을 설치해야 합니다. 아래 명령어를 사용하여 babel-loader를 설치합니다.
npm install babel-loader --save-dev
Webpack 설정 파일 수정
webpack.config.js 파일을 수정하여 babel-loader를 추가하고, 폴리필을 설정합니다.
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};
위 설정에서는 module.rules 배열에 babel-loader를 추가하고, @babel/preset-env를 사용하도록 설정합니다. 이렇게 하면 Webpack이 자동으로 Babel을 사용하여 JavaScript 파일을 번들링하고 필요한 폴리필 코드를 추가할 것입니다.
결론
이제 Webpack을 사용하여 프로젝트에서 폴리필을 적용하는 방법을 알아보았습니다. Webpack 설정 파일을 수정하여 babel-loader를 추가하고, @babel/preset-env를 설정함으로써 폴리필을 적용할 수 있습니다. 이를 통해 ES6 이상의 JavaScript 문법을 사용할 수 있고, 지원하지 않는 브라우저에서도 정상적으로 동작할 수 있습니다.