[Babel] Webpack 을 이용해 Babel 트랜스파일을 진행하는 과정에 대해 알아보자!

앞선 게시글에서 실습했던 것 처럼 트랜스파일을 진행하면 결과물을 얻을 수 있지만, 해당 코드들은 Node.js 환경을 기반으로 변환되었기 때문에 브라우저 환경에서는 사용할 수 없는 코드이다.
이 때 webpack과 babel을 결합해 사용하면 브라우저에서 사용할 수 있다!
또, 번들링 과정에서 트랜스파일을 진행하는 것이 효율적이다!

babel-loader 설치

npm install -D babel-loader

webpack 설정 파일에 babel-loader 추가

module.exports = {
  mode: "production",
  entry: "./src/javascript/index.js",
  output: {
    path: path.resolve(process.cwd(), "dist"),
    filename: "[name].[contenthash].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: ["file-loader"],
      },
      {
        test: /\.js$/,
        include: [path.resolve(__dirname, "src/javascript")],
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  useBuiltIns: "usage",
                  corejs: 3,
                },
              ],
            ],
          },
        },
      },
    ],
  },
  // ...
};

빌드 실행

npm run build:prod

• 만약 빌드 실행 도중 다음과 같은 오류가 발생하면,
  "Cannot find module 'fs/promises'"

  내가 적어놓은 오류 해결 게시물을 참고해보면 좋을 것 같다.