[npm] webpack에서 babel 설정

저번 포스팅에서 babel 셋팅하는 것을 설명한 적이 있다. 그 때는 webpack을 이용하지 않고 babel 만 이용해서 셋팅했는데, webpack으로 babel을 셋팅하면 프로젝트 파일이 묶여 나오면서 js를 변경(es6를 es5로 또는 리액트 jsx를 js로 변환 등)할 수있다.

 

일단 babel-loader와 사용할 프리셋들, babel-core를 설치해야 한다.

$npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react

 

/*webpack.config.js*/
const path = require('path');
const webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...
    module: {
        rules:[/**다양한 loader 추가 가능 */
            {
                test: /\.js$/,/**어떤 파일명을 갖는지 정의(정규표현식을 이용) */
                exclude: /(node_modules)/,/**패키징에서 제외할 폴더 */
                use: {
                    loader: "babel-loader",
                    options: {
                    presets: ["@babel/preset-env", "@babel/preset-react"],
                    },
                },
            }
        ]
    },
    ...
};

웹팩의 기본 설정은 다음의 포스팅을 참조해 주세요.

[npm] webpack 셋팅

 

바벨 프리셋 정보는 이전에 포스팅한 아래 글을 참조해 주세요.

[npm] 트랜스컴파일러 babel 셋팅