[React] Babel과 Webpack

react로 개발을 해본 사람이라면 babel과 webpack에 대해 들어본 적 있을 것이다.

그렇다면 이 babel과 webpack 두 녀석은 정확히 무슨일을 하는걸까?

 

webpack

Webpack은 여러개 파일을 하나로 합쳐주는 모듈 번들러이다.

 

Webpack은 '빌드'라는 과정을 통해 프로젝트에서 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜준다. 

자바스크립트 코드 뿐 아니라 이미지, CSS등도 같이 빌드한다.

 

번들러를 사용하면 여러개 파일을 하나로 묶어주기 때문에

네트워크 접속의 부담을 줄여 더 빠른 서비스를 제공할 수 있다.

 

 

Babel

바벨은 코드를 재작성해주는 대표적인 트랜스파일러(transpiler) 프로그램으로,

모든 브라우저가 최신 기능인 ES6의 기능을 제공하지 않기 때문에 ES5로 코드를 변환시켜준다.

트랜스파일링 : 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것

 

아래 이미지는 Babel 공식 홈페이지에서의 코드 변환 예시이다.

Babel, Webpack 설치 및  구성

1. 폴더 구조 만들기

폴더를 만들고 애플리케이션 이름에 따라 이름을 지정 후

명령 프롬프트(cmd)에서 폴더를 열고 cmd에서 다음 명령을 실행한다.

npm init

 

패키지 이름, 작성자 이름과 같은 기본 정보를 묻는데, 이 정보를 사용하여 package.json이라는 파일을 생성한다.

 

프로젝트 폴더 안에 src 폴더를 만들고 index.js 및 index.html이라는 이름의 빈 파일을 추가한다.

아래와 같이 프로젝트 수준에서 .babelrc 및 webpack.config.js라는 두 개의 구성 파일을 만든다.

(.babelrc 및 webpack.config.js 의 파일 이름은 언급된 것과 정확히 동일해야 함)

2. babel , webpack 설치

이제 Babel 및 Webpack으로 React 애플리케이션을 구성하는 데 필수적으로 필요한 일부 패키지를 설치해야 합니다.

 

1. 주요 종속성 패키지인 React 및 React DOM을 설치한다.

npm i -S react react-dom

2. 애플리케이션의 개발 의존성으로 Babel을 설치한다.

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

babel-core : babel의 메인 엔진 패키지

babel-preset-env : ES5/ES6 자바스크립트 지원을 추가

babel-preset-react : React JSX 코드에 대한 지원을 추가

babel-loader : Loader는 babel 및 webpack의 도움을 받아 이전 버전과 호환되는 JS 코드로 반응 JSX 코드를 변환

 

+) babel-loader8.*에는 babel7이 필요하다. babel6을 사용하고 싶다면. babel-loader.7을 설치해야 한다.

npm install --save-dev babel-loader@7.0.0
// 또는
npm install --save-dev @babel/core

 

3. 애플리케이션의 개발 종속성으로 Webpack을 설치한다.

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

 

webpack : webpack 플러그인의 메인 엔진

webpack-cli : webpack 및 플러그인 설정을 위한 명령줄 도구를 제공

webpack-dev-server : 라이브 서버를 개발에 사용

html-webpack-plugin : 애플리케이션용 HTML 템플릿을 만드는 데 사용

 

Babel 구성

.babelrc 에 아래 내용을 추가한다.

{
  "presets": [
    "@babel/preset-env"
  ]
}

 

Webpack 구성

webpack.config.js에 아래 내용을 추가한다.

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

// plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    entry: {
    // 진입점
        main: path.resolve(__dirname, 'src/index.js') 
    },
    output: {
        // 번들링된 산출물의 경로와 번들링 파일 이름
        path: path.resolve(__dirname, './dist'),
        filename: 'index.bundle.js'
    },
    resolve: {
        alias: {
            components: path.resolve(__dirname, 'src'),
        },
        extensions: ['.js', '.jsx'],
    },
    module: {
        // loader 설정
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.jfif$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                }
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
        // 번들링된 js 소스가 index.html 템플릿에 들어가게됨
            template: './public/index.html', 
        }),
    ],
    devServer: {
        // webpack-dev-server 설정
        host: 'localhost',
        port: 9000,
        hot: true, // 모듈이 수정되면 자동 reloading
        historyApiFallback: true,
    },
    // 번들링된 소스와 원본 소스를 매핑해줌. 추적하기 쉬워서 디버깅이 원활해짐
    devtool: 'eval-cheap-source-map', 
};

 

package.js

package.js의 script에는 아래 start와 build 코드를 추가해준다.

npm start를 하면 dev-server가 실행되고

npm run-script build는 webpack이 js와 html, css 파일들을 번들링한다. 

// package.json
"scripts": {
  "start": "webpack-dev-server --mode development --open --hot",
  "build": "webpack --mode production"
}

이제 index.js, index.html등을 추가하고 개발을 시작하면 된다.

 

이후 아래 명령을 통해  dist 폴더를 생성하고

그 안에 번들링 된 파일인 bundle.js 및 index.html이라는 두 개의 파일이 생성된다.

npm run build

이렇게 webpack과 babel에 대해 알아보았다.

더욱 자세한 내용은 babel 공식 홈페이지를 통해 확인할 수 있다.

 

 

[ 참고 ]

https://memostack.tistory.com/277

https://velog.io/@dbsbest10/Webpack-%EA%B3%BC-Babel%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C#-babel

https://dev.to/shivampawar/setup-webpack-and-babel-for-a-react-js-application-24f5

babel 공식 홈페이지 : https://babeljs.io/

https://whales.tistory.com/150