Bundler(babel)

babel

1. babel 패키지 3가지 설치
   npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

2. .babelrc.js 파일 생성해서 아래 내용 삽입
   module.exports를 통해서 객체 데이터를 밖으로 내보내기를 하고 동작을 한다.
   presets 옵션은 따로 명시해야하는 javascript 기능을 한번에 지원해주는 @babel/preset-env 패키지 설치.
   plugins 옵션은 비동기처리를 위해서 @babel/plugin-transform-runtime 패키지 설치

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}

3. webpack.config.js파일 설정
   webpack이 해석을 할려면 중간에 매개체 역할로 babel-loader가 필요함

  module: {
    rules: [
      { // .scss로 끝나는 확장자를 찾는데 s는 있을 수도 없을 수도 있다.
        test: /\.s?css$/,
        use: [
          // 아래 해석된 내용을 html파일에 삽입해줌
          'style-loader',
          // js파일에서 css파일을 해석할 수 있게 도와줌
          'css-loader',
          // sass에서 해석된 내용을 postcss-loader를 통해 공급업체 접두사를 붙여준다.
          'postcss-loader',
          // css-loader보다 sass-loader가 먼저 실행되어야 한다.
          'sass-loader'
        ]
      },
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
      }
    ]
  },

4. babel-loader를 추가하면 Babel 구성은 끝
   npm i -D babel-loader