LHJ

I'm a FE developer.

바벨 - 풀이

01 Oct 2020 » node_webpack2

바벨 - 풀이

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

// babel.config.js
module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                targets: {
                    ie: '11'
                },
                useBuiltIns: 'usage',
                corejs: {
                    version: 3 // 기본값 2
                }
            }
        ]
    ]
}

// webpack.config.js
const path = require("path");
const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

process.env.NODE_ENV = process.env.NODE_ENV || "development";

module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js"
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist")
  },
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          process.env.NODE_ENV === "production"
            ? MiniCssExtractPlugin.loader // 프로덕션 환경
            : "style-loader", // 개발 환경
          "css-loader"
        ]
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        loader: "url-loader",
        options: {
          name: "[name].[ext]?[hash]",
          limit: 10000 // 10Kb
        }
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: `빌드 날짜: ${new Date().toLocaleString()}`
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      templateParameters: {
        env: process.env.NODE_ENV === "development" ? "(개발용)" : ""
      },
      minify:
        process.env.NODE_ENV === "production"
          ? {
              collapseWhitespace: true, // 빈칸 제거
              removeComments: true // 주석 제거
            }
          : false,
      hash: process.env.NODE_ENV === "production"
    }),
    new CleanWebpackPlugin(),
    ...(process.env.NODE_ENV === "production"
      ? [new MiniCssExtractPlugin({ filename: `[name].css` })]
      : [])
  ]
};

babel-loader 부분을 보면 loader 키값말고 use 키값을 사용해 배열로 넣을 수도 있다.
node_modules 폴더에 있는 라이브러리들은 항상 exclude 키로 제외해줘야 된다.
이미 빌드된 파일이기 때문이다.

난 왜 강의랑 똑같은 오류가 안뜰까?
강의에선 regenerator-runtime 모듈이 필요하다는 오류메시지가 콘솔창에 출력이 된다.
async/await를 위한 폴리필이다.

하지만 내가 작성한 코드를 실행하면 이러한 오류가 안뜬다. 잘된다.
다만 IE11, 10에서 실행하면 27번째 줄에서 계속 에러가 날 뿐이다…

뭘까..? 여튼 강의 내용처럼 async/await와 generator를 위한 폴리필을 설치해보자.

npm i regenerator-runtime

여튼 위와 같은 에러는 안뜨고,,, regenerator-runtime은 이제 기본적으로 core-js에 들어가있는 거 같고…. 그냥 계속

개체는 이 기능을 지원하지 않습니다.

이 오류만 뜬다… 뭘까…

원인

CustomEvent 이놈 때문에 오류가 났다.
CustomEvent() 생성자는 새로운 CustomEvent를 생성한다.
하지만 해당 생성자는 IE에선 지원하지 않는다.

이를 위한 폴리필을 추가해야된다.

npm i -D custom-event-polyfill

해당 오류가난 ./src/views/View.js 파일에 다음을 추가한다.

import 'custom-event-polyfill';

그리고 빌드한다. 그럼 IE에서 오류가 안나는걸 확인할 수 있다.

폴리필 개념 아주 유용한데? 앞으로 여러 곳에서 활용할 수 있을거 같다~!
참고로 regenerator-runtime 모듈은 core-js에 이미 포함된듯
따로 설치할 필요 없을 것 같다~!
그래서 내가 이 문제를 풀때는 regenerator-runtime 추가하라는 오류메시지가 안떴던 거야~!

이것과 비슷한 원리인 sass를 다음시간에 공부해보도록 하겠다.

Related Posts