[2019.04.22] WebPack 사용법 #4 - babel 세팅

 

브라우저 내에서는 ES6 이상의 문법을 호환하지 않는다. 그럼 우리는 어떻게 ES6문법을 이용하여 개발이 가능한 것인가.

바로 babel이란 모듈이, ES6 문법을 브라우저에 사용할 수 있는 방식인 ES5으로 바꿔준다.

이 babel을 사용하게 위해서는 모듈을 설치하고 webpack에 설정을 해 주어야 한다.

그러면 babel을 사용하는 법을 알아보자. 이전 글에 작업했던 webpack에 이어서 한다.

 

# babel 모듈 설치 

npm i -D babel-cli babel-preset-env babel-core

 

위 세개의 모듈은 babel을 사용하게 위해서 필요로 한 필수 모듈이다.

 

pacakge.json 파일

 

설치를 하면 package.json에서 babel 관련 버전이 표시되는 것을 확인할 수 있다.

그리고 해당 root경로에 '.babelrc' 파일을 생성 후, 아래와 같이 입력해준다.

 

{
  "presets": ["env"]
}

// .babelrc 파일

 

그러면 babel 모듈 세팅은 다 했다.

이제는 webpack에 babel 모듈을 사용할 수 있도록 webpack.config.js 파일에 babel 모듈 내용을 추가해준다.

 

const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
  entry: path.resolve(__dirname, 'app.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      include: [
        path.resolve(__dirname, 'js')
      ],
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }]
  },
  watch:true,
  plugins: [
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      files: ['./dist/*.html'],
      server: {baseDir: ['dist']}
    })
  ]
  // devtool: 'source-map' // 디버깅 부분
}

// webpack.config.js 파일

 

중간에 module 부분이 추가된 것을 볼 수 있다. 내부에 rules가 있고 , 그 안에 test, include, exclude, use가 있다.

(우선 babel 공식문서에 사용법이 저렇게 되어 있다. 왜 저렇게 작성을 하는지는 조금 더 찾아봐야겠다.)

 

그럼 이제 ES6문법을 사용할 수 있다. (webpack.config.js 파일을 수정하고 다시 webpack을 돌려야 되는 것을 잊지말자!)

 

app.js 파일

 

app.js파일에서 node환경에서 쓰이던 require을 ES6문법인 import로 변경하여 사용해보자.

 

index.html 브라우저 화면

 

그러면 정상적으로 ES6 문법이 브라우저에 호환이 된 것을 확인할 수 있다.

 

바벨 관련 모듈과 내용은 더 많다. 향후 공부를 더 하고 이후에 내용을 더 추가하도록 하겠다.