WebPack 에서 babel사용 설정

2021.07.05 - [Lecture] - WebPack 설정 및 실행

 

위 글처럼 webpack을 처음 세팅했을때는 babel을 사용할 수 없다.

 

babel을 사용하기 위해선 초기설정을 좀 더 해야하는데

 

 

1. npm install -D @babel/core

=> 바벨의 기본적인 내용을 담고있는 말그대로 babel의 core

 

2. npm install -D @babel/preset-env

=> 브라우저에 맞게 최신문법을 옛날 문법으로 세팅해줄 수 있는 라이브러리

 

3. npm install -D @babel/preset-react

 

4. npm install -D babel-loader

=> babel과 webpack을 연결해주는 라이브러리

 

이렇게 4가지를 다운 받고 webpack.config.js 파일로 간다.

 

module.exports안에서 module 설정을 해준다.

 

일단 module객체 안에 rules라는 배열을 만들고 그 안에 객체로 test, loader, options를 아래와 같이 세팅해준다.

 

    module:{
        rules:[{
            test:/\.jsx?$/,
            loader:'babel-loader',
            options:{
                presets:[
                    '@babel/preset-env',
                    '@babel/preset-react'
                ]
            }
        }]
    },

 

이렇게 되면 babel 설정이 끝나고 그 상태에서 바벨 구문을 한번 사용해 보자

 

const React = require('react');
const ReactDOM = require('react-dom');

class App extends React.Component{
    render(){
        return(
            <div>Hello babel</div>
        )
    }
}

ReactDOM.render(
    <App/>,
    document.querySelector('#root')
)

 

에러 없이 잘 실행되는 것을 확인 할 수 있다.