1. babel

01. @babel/core @babel/preset-env @babel/plugin-transform-runtime package 설치

 npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

02. .babelrc.js

module.exports = {
    // presets : 일일이 따로 명시해야 되는 js 기능을 한번에 지원하는 패키지
    presets : ['@babel/preset-env'],
    // 비동기 처리를 위한 패키지
    plugins : [
        ['@babel/plugin-transform-runtime']
    ]
}

03. webpack.config.js 수정

// import
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",

  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, "dist"),
    // filename: "main.js",
    clean: true,
  },

  module: {
    rules: [
      {
        // s?로 s가 붙을수도 있고 없을 수도 있다
        // .css or .scss를 끝나는 확장자 파일을 찾는 정규표현식
        test: /\.s?css$/,
        use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
      },
      {
        test : /\.js$/,
        use : [
          'babel-loader'
        ]
      }
    ],
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html",
    }),
    new CopyPlugin({
      patterns: [{ from: "static" }],
    }),
  ],
  // 개발 서버를 오픈할 때 동작시킬 수 있는 명령어
  devServer: {
    host: "localhost",
  },
};

04. babel-loader package 설치

npm i -D babel-loader