[Instagram] 프로젝트 설정(3) - Babel 적용

[ Babel ] 

• JavaScript Transcompiler

 

 

- Babel 적용하는 이유. Why ?

• ES6+ 코드를 이전 버전의 JavaScript로 변환하여 ES6+ 코드를 지원하지 않는 구 브라우저에서도 동작할 수 있도록 하기 위함

 

 

- 프로젝트에 Babel 적용

• Babel 설치

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

 

• webpack.config.js 파일에 babel-loader 추가

// webpack.config.js
const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    clean: true, // 재빌드 시, 필요없는 파일들 제거
  },
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
      },
    ],
  },
  plugins: [new HtmlPlugin({ template: './src/html/index.html' })],
};

 

• .babelrc.js 파일 생성 및 설정
  • @babel/preset-env : JavaScript ES6를 ES5로 변환

// .babelrc.js
module.exports = {
  presets: ['@babel/preset-env'],
};

---

[ 참고자료 ]

https://babeljs.io/setup#installation

Babel · The compiler for next generation JavaScript