바벨 로더 설정하기

과정

• 자바스크립트 파일만 있을 때는 빌드할 때 문제가 없지만, CSS, 타입스크립트 등이 있다면 반드시 loader를 사용해야 한다.
• babel-loader는 트랜스파일러로써 코드 변환을 해준다.
• 최신 자바스크립트 문법(es6)이나 JSX문법으로 작성된 코드를 ES5문법으로 변환해준다.(구버전 웹 브라우저와 호환하기 위해서)

1. JS파일 변환할 때

1-1. npm install -D babel-loader @babel/core @babel/preset-env 입력

1-2. webpack.config.js 설정하기 (module의 rules안에 코드를 추가했다)

var path = require("path");

module.exports = {
  mode: "none",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

3. npm run build로 빌드된 파일 확인해보기

바벨 로더 적용 전

바벨 로더 적용 후

자바스크립트의 es6문법 (화살표 함수, const 등)이 es5의 문법으로 바뀌었다! WoW

2. JSX파일 변환할 때

2-1. npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react 입력

1-2. webpack.config.js 설정하기 (module의 rules안에 코드를 추가했다)

var path = require("path");

module.exports = {
  mode: "none",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
				test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },

      },
    ],
  },
};

요약

@babel/preset-env (바벨 프리셋)

• 바벨 플러그인을 모아둔 것으로 바벨 프리셋이라고 부른다.
• preset-env: es6+를 변환할 때 사용, 폴리필

.babelrc.json나 babel.config.js 바벨 설정 파일 (웹팩의 설정파일이 아닌, 따로 설정할 수도 있다)

• .babelrc.json: 프로젝트 일부에 적용하고 싶을 때 사용
• babel.config.js: 프로젝트 전체(프로젝트의 루트 디렉토리에 위치)에 설정하고 싶을 때 사용

 

참고자료 - 바벨 로더 | 웹팩 (webpack.js.org)