webpack 3부: babel-loader

사실 webpack을 처음 다루게 된 계기는 vuejs 때문이었다.

vuejs의 promise는 ECMAScript 6 버전부터 제공되는 것으로, IE 계열의 브라우저에서는 버전에 상관없이 작동하지 않는다.

역시 브라우저계의 이단아..

이걸 해결해보려고 stackoverflow를 허구헌날 뒤적일때 공통적으로 등장하는 단어가 바로 webpack과 babel이었다.

webpack으로 js를 번들링 할 때 babel loader를 거치게 하면 하위버전의 ECMAScript로 자동변환 할 수 있다는 얘기.

babel에 대한 자세한 소개는 이곳에 있다: https://gist.github.com/preco21/dddab805401458d5d538

우선 필요한 패키지를 설치 해 준다.

public$ npm i -S babel-core babel-loader babel-polyfill babel-preset-env es6-promise

설마 3편까지 읽으면서 맨 앞의 "public$ " 부분이 프롬프트인걸 모르진 않겠지..

npm은 composer와는 달리 설치 과정이 무척 시끄럽다.

화면에 뭐가 한참씩 뜨고나서야 설치가 완료된다.

이제 다시 webpack.config.js 파일을 다룰 차례가 되었다.

babel은 로더, es6-promise는 플러그인으로 쓰게 된다.

 

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
 
module.exports = {
    entry: {
        common: "./js/common.js",
        list: "./js/list.js",
        view: "./js/view.js",
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: "/dist/",
        filename: '[name].build.js'
    },   
    resolve: {
        extensions: ['js', 'json'],        
        modules: [
            'js',
            'node_modules'
        ]    
    },
    plugins: [
            new webpack.ProvidePlugin({            
                Promise: 'es6-promise'
            }),        
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader?presets[]=env'
            },
        ],
    }
};

babel-loader는 module.loaders 배열에,

es6-promise는 plugins 배열에 추가 해 주었다.

다시 webpack 커맨드를 통해 js 파일들을 빌드 해 주자.

vuejs에서 쓰이는 <template> 태그를 제외하면 ES6으로 작성한 js들이 IE에서도 훌륭하게 동작하는것을 확인할 수 있다.