6. webpack - babel 설정

1. 설치 

• 터미널 입력: npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

---

2. .babelrc.js 파일 생성

• 파일명이 마침표로 시작하는 것을 확인하자 → .babelrc.js
• 다음 코드와 같이 작성하자.

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

 

- bable preset: 바벨의 자바스크립트 지원 패키지

- babel plugin: 바벨의 비동기 처리를 지원하는 패키지 

 

---

3. webpack.config.js 파일에 설정 추가 

• 모듈 부분에 다음과 같이 작성하자. 

 module: {
    rules: [
      {
        test: /\.s?css$/, 
        // .scss 또는.css 확장자를 갖는 파일을 찾는 정규표현식
        // 물음표를 붙이면 있을수도 없을수도 있다는 뜻 ==> s가 있거나 없을 수도 있다. 
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
      }
    ] 
  },

 

a) babel-loader 설치하기 

• 터미널 입력: npm i -D babel-loader
• babel-loader 관련된 설정은 위에 webpack.config.js 에서 완료했기에 추가작업은 필요하지 않다.