Webpack과 Babel을 이용한 React 개발 환경 구성하기

Photo by Elena Koycheva on Unsplash

React로 개발을 하다보면 웹팩과 바벨에 대해 많이 듣습니다. 그런데 막상 create-react-app 으로 프로젝트를 시작하면 웹팩을 건드는 일은 거의 없습니다. 이번 시간에는 웹팩과 바벨에 대해서 알아보겠습니다.

📦 What is Webpack?

웹팩은 모듈 번들러(Module Bundler)입니다. 코딩할 때 편의를 위해 여러 개의 모듈로 나눠서 작업하는 경우가 많습니다. 하지만 브라우저에서 파일 단위 모듈 시스템을 이용하는 것은 많은 네트워크 비용 낭비를 유발할 수 있습니다. 이러한 문제 때문에 여러 개의 모듈을 하나의 파일로 묶어서 보낼 모듈 번들러가 필요합니다. 여기서 웹팩이 등장합니다. 웹팩에서는 자바스크립트, 스타일시트, 이미지 등 모든 것을 모듈로 봅니다. 이런 웹팩에는 중요한 속성이 4가지 있습니다.

1. Entry:
   entry 는 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점 이자 자바스크립트 파일 경로 입니다. 웹팩은 entry 를 통해서 모듈을 로딩하고 하나의 파일로 묶습니다.
2. Output:
   웹팩에서 entry 로 찾은 모듈을 하나로 묶은 결과물을 반환할 위치입니다.
3. Loader:
   웹팩은 기본적으로 자바스크립트와 JSON 만 빌드할 수 있습니다. 자바스크립트가 아닌 다른 자원 (HTML, CSS, Image)를 빌드할 수 있도록 도와주는 속성입니다.
4. Plugin:
   plugin 은 웹팩의 기본적인 동작 외 추가적인 기능을 제공하는 속성입니다. loader 는 파일을 해석하고 변환하는 과정에 관여하고, plugin 은 결과물의 형태를 바꾸는 역할을 합니다.

🔍 About Babel

바벨은 자바스크립트 es6 문법을 es5로 변환해주는 트렌스파일러(transpiler) 입니다. 이것을 통해 React를 일반 브라우저에서 실행시킬 수 있습니다. babel 공식 사이트에서 간단하게 es6 문법으로 변환된 자바스크립트 코드를 확인할 수 있습니다.

🌏 React 개발 환경 구성

화면에 Hello, Webpack! 을 띄우는 간단한 예제를 만들어보겠습니다. Node.js 와 npm 을 사용하겠습니다.

1. 의존성 초기화

작업할 폴더를 만들고 package.json 파일을 만들어서 초기화 시킵니다.

mkdir webpack-react-example && cd webpack-react-example
npm init -y

2. 바벨 설정

바벨을 위한 패키지 입니다. 바벨은 개발 단계에서만 사용하기 때문에 -D 옵션으로 devDependencies 에 추가합니다.

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

webpack-react-example 에 .babelrc 파일을 만들고 아래 코드를 추가합니다.

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

이렇게 하면 바벨의 기본 설정이 끝났습니다.

3. 웹팩 설정

웹팩을 사용하기 위해 필요한 패키지 입니다.

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

• webpack: 모듈 번들러인 웹팩입니다.
• webpack-cli: 웹팩의 커맨드 라인 인터페이스입니다.
• webpack-dev-server: 개발 서버를 제공합니다.

웹팩 설정 파일을 만들어보겠습니다. webpack-react-example 에서 webpack.config.js 파일을 만들고 코드를 작성하세요. module.exports = {} 부분에서 웹팩을 설정합니다.

// webpack.config.js
module.exports = {
  mode: 'development', // 1
  entry: './src/index.js', // 2
  output: { // 3
    filename: 'bundle.[hash].js' // 4
  },
};

module.exports = {} 부분에서 웹팩을 설정합니다.

1. 현재 모드를 개발 환경으로 설정합니다.
2. 웹팩의 중요한 개념 중 첫 번째인 entry 입니다. 애플리케이션 진입점을 나타냅니다.
3. 두 번째 개념 output 입니다. 번들된 파일을 저장할 경로를 나타냅니다.
4. 번들된 파일의 이름을 나타냅니다. [hash] 는 애플리케이션이 컴파일 될 때 웹팩에서 생성된 해시를 사용합니다.

잠시 웹팩 설정을 제대로 했는지 자바스크립트로 한번 확인해보겠습니다. package.json 에서 웹팩 명령어를 추가하겠습니다.

// package.json
...
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack"
},
...

src/index.js 를 만들고 아래 코드를 작성해주세요.

// src/index.js
console.log(1);

npm start 로 웹팩을 실행시키면 dist 폴더와 bundle.[hash].js 파일이 생성됩니다.

위에서 웹팩의 중요한 개념 중 entry 와 output 를 봤으니 다음으로 loader 는 어떻게 쓰는지 보겠습니다. 관련 패키지 입니다.

npm i -D babel-loader html-loader

• babel-loader: es6 를 es5 로 바꿔주는 바벨을 웹팩에서 사용할 수 있게 해줍니다.
• html-loader: 웹팩이 html을 읽을 수 있게 해줍니다.

loader 는 module 과 rules 이라는 키워드를 사용합니다. 룰을 정의 할 때는 아래의 폼을 사용합니다.

module: {
  rules: [
    {
      test: '빌드할 파일 확장자 정규식'
      exclude: '제외할 파일 정규식'
      use: {
        loader: '사용할 로더 이름'
        option: '로더 옵션'
      }
    }
  ]
}

아래 코드를 webpack.config.js 에 추가해주세요.

// webpack.config.js
module.exports = {
// ...
module: {
    rules: [
      { // 1
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      { // 2
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: true,
            },
          },
        ],
      },
    ],
  },
// ...

1. es6 바벨 관련 loader 입니다. .js 와 함께 .jsx 확장자도 같이 번들합니다. node_modules 안에 있는 파일은 번들에 제외합니다.
2. html loader 입니다. minimize: true 는 코드 최적화를 하는 옵션입니다.

다음은 plugin 입니다.

npm i -D html-webpack-plugin

html-webpack-plugin 는 html 관련 plugin 입니다. 템플릿을 지정하거나 favicon을 설정할 수 있습니다.

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    })
  ],
// ...

template: ‘public/index.html’ 로 public/index.html 를 템플릿으로 지정합니다.

웹팩에서 개발 서버를 제공합니다. webpack-dev-server 패키지를 설치해주세요.

npm i -D webpack-dev-server

그리고 package.json 의 스크립트를 변경하겠습니다.

// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },

webpack.config.js 에서 개발 서버를 설정합니다.

// webpack.config.js
const port = process.env.PORT || 3000;
module.exports = {
// ...
  devServer: {
    host: 'localhost',
    port: port,
    open: true,
  },
};

host 는 개발 서버의 url 입니다. port 는 기본값으로 3000번 포트를 사용합니다. open 은 서버가 실행될 때 브라우저를 자동으로 열어줄지 결정합니다. devServer 의 다른 옵션은 여기서 확인 해주세요. 아래는 webpack.config.js 의 전체 코드입니다.

이제 React 코드를 작성하겠습니다. React 패키지를 설치해주세요.

npm i react react-dom

수정된 src/index.js 와 src/App.js 입니다.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
// src/App.js
import React from 'react';
const App = () => (
  <div>
    Hello, Webpack!
  </div>
);
export default App;

마지막으로 public/index.html 템플릿을 만들어줍니다.

// public/index.html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack-for-react</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

npm start 로 애플리케이션을 실행시켜보세요. 바벨을 통해 es6 문법은 es5로 변환하고 웹팩을 통해 하나의 파일(bundle.[hash].js) 로 만들어서 브라우저에 띄워집니다.

developer tools > Sources 탭 에서 번들된 파일을 볼 수 있습니다. 감사합니다!

Reference

웹팩 핸드북

[번역] 깊이 있는 리액트 개발 환경 구축하기

Webpack 기초

웹팩의 기본 개념