Webpack으로 React 시작하기

개요

회사에서 React(리액트)로 새로운 프로젝트를 진행하게 되었습니다. 그래서 오랜만에 처음부터 세팅할 기회가 생겨 정리하게 되었습니다. 이번 블로그 포스트에서는 React(리액트)로 프로젝트를 시작하기 위해 Webpack(웹팩)을 설정하는 방법에 대해서 알아보도록 하겠습니다.

이 블로그에서 다루는 소스코드는 깃헙(Github)에서 확인할 수 있습니다.

Github: https://github.com/dev-yakuza/react_start

프로젝트 준비

아래에 명령어를 통해 프로젝트를 준비합니다.

mkdir react_start
cd react_start
npm init -y

설치

아래에 명령어로 React(리액트)로 프로젝트를 만들때 필요한 라이브러리들을 설치합니다.

npm install --save react react-dom
npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react rimraf

설치한게 상단히 많습니다. 하나하나 살펴보도록 하겠습니다.

react, react-dom: React(리액트) 개발에 필요한 필수 항목입니다.
webpack: Webpack(웹팩) 라이브러리입니다.
webpack-cli: Webpack(웹팩)을 명령어로 조작하기 위한 라이브러리입니다.
html-webpack-plugin: Webpack(웹팩)에서 HTML을 다루기 위한 플러그인입니다.
webpack-dev-server: Webpack(웹팩)으로 로컬에서 개발하기 위한 테스트 서버입니다.
babel-loader: Webpack(웹팩)에서 babel(바벨)을 다루기 위한 라이브러리입니다.
@babel/core: babel(바벨)로 컴파일할 예정입니다.
@babel/preset-env: babel(바벨)로 컴파일시 어떤 타겟으로 지정할지 설정하는 라이브러리입니다.
@babel/preset-react: React(리액트)를 babel(바벨)로 컴파일하기 위한 라이브러리입니다.
rimraf: Mac과 윈도우즈에서 동일한 명령어로 폴더를 삭제하기 위한 라이브러리입니다.

package.json 설정

아래와 같이 Webpack(웹팩)을 동작시키기 위한 스크립트를 추가합니다.

{
  "name": "react_start",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "prebuild": "rimraf dist",
    "build": "webpack --progress --mode production"
  },
  "author": "[email protected]",
  "dependencies": {
    "react": "16.8.6",
    "react-dom": "16.8.6"
  },
  "devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/preset-env": "7.4.5",
    "@babel/preset-react": "7.0.0",
    "babel-loader": "8.0.6",
    "cross-env": "5.2.0",
    "html-webpack-plugin": "3.2.0",
    "rimraf": "2.6.3",
    "webpack": "4.33.0",
    "webpack-cli": "3.3.4",
    "webpack-dev-server": "3.7.1"
  }
}

스크립트를 하나씩 살펴보도록 하겠습니다.

webpack-dev-server --mode development,: npm start 또는 npm run start로 실행되는 스크립트입니다. Webpack(웹팩)의 개발 서버를 development 모드로 실행시킵니다. Webpack(웹팩)을 실행시킬 때는 항상 모드(development 또는 production)를 설정해야합니다.
"prebuild": "rimraf dist",: npm run build로 build 스크립트를 실행하면 build 스크립트전에 이 스크립트가 실행됩니다. pre와 post로 스크립트 실행전, 실행후 실행시키고 싶은 스크립트를 실행시킬 수 있습니다. 저는 빌드후 생성되는 폴더를 지우고 다시 만들기 위해 사용하고 있습니다.
"build": "webpack --progress --mode production": npm run build로 실행되는 스크립트입니다. Webpack(웹팩)을 production 모드로 실행시켜 번들링(bundling)합니다. –progress은 빌드 진행 과정을 모니터링하기 위한 옵션입니다.

Webpack 설정

아래와 같이 React(리액트)로 프로젝트를 진행하기 위해 Webpack(웹팩)을 루트 폴더의 webpack.config.js 이름으로 생성합니다.

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

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    'js/app': ['./src/App.jsx'],
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],
};

Webpack(웹팩) 설정을 하나씩 살펴보도록 하겠습니다.

const path = require('path');

절대 경로를 참조하기위해 path를 불러옵니다.

const HtmlWebpackPlugin = require('html-webpack-plugin');

Webpack(웹팩)에서 HTML을 다루기위한 플러그인을 불러옵니다.

entry: {
    'js/app': ['./src/App.jsx'],
},

번들 파일(bundle)로 만들기 위한 시작 파일(entry)을 설정하였습니다. 생성될 번들 파일(bundle)은 js 폴더 하위에 app.js라는 이름으로 생성될 것이며 이 파일은 ./src/App.jsx를 시작으로 번들링(하나로 합치기)합니다.

output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/',
},

생성된 번들 파일(bundle)은 ./dist/ 폴더에 생성됩니다. publicPath를 지정함으로써 HTML등 다른 파일에서 생성된 번들을 참조할 때, /을 기준으로 참조합니다. (ex> <script type="text/javascript" src="/js/app.js"></script>)

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      use: ['babel-loader'],
      exclude: /node_modules/,
    },
  ],
},

React(리액트) 파일인 jsx와 js는 babel(바벨)을 이용하여 빌드합니다.

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
  }),
],

마지막으로 ./src/index.html 파일을 dist 경로에 index.html로 파일을 생성합니다. 파일을 생성할 때, Webpack(웹팩)이 만든 번들 파일(/js/app.js)를 HTML에 추가하여 생성합니다.

babel 설정

babel을 설정하기 위해 .babelrc를 생성하고 아래와 같이 수정합니다.

{
  "presets": [
    [
      "@babel/preset-env",
      { "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } }
    ],
    "@babel/react"
  ]
}

babel(바벨)로 컴파일 할 때, target을 지정하였습니다. 브라우저의 상위 버전 두개(예: IE 11, 10)와 한국(KR)에서 5% 이상의 점유율을 가지고 있는 브라우저에 대응하여 컴파일되도록 설정하였습니다. 또한 "@babel/react"을 통해 React(리액트)도 컴파일될 수 있도록 설정하였습니다.

HTML 만들기

React(리액트)를 사용할 HTML 파일을 ./src/index.html에 생성하고 아래와 같이 수정합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

우리는 <div id="app"></div>안에 React(리액트)를 추가할 예정입니다.

React 만들기

드디어 React(리액트) 파일을 만듭니다. ./src/App.jsx를 생성하고 아래와 같이 수정합니다.

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello World!</h1>;
};
ReactDOM.render(<App />, document.getElementById('app'));

확인

아래에 명령어로 우리가 생성하고 설정한 내용이 제대로 동작하는지 확인합니다.

npm start

그리고 브라우저를 열고 http://localhost:8080/ 이동하면 Hello World!가 보이는 것을 확인할 수 있습니다. package.json의 스크립트인 "start": "webpack-dev-server --mode development",을 "start": "webpack-dev-server --mode development --open",처럼 --open 옵션을 추가하면 npm start로 Webpack(웹팩)의 개발 서버를 실행시키면 자동적으로 브라우저가 열리고 http://localhost:8080/로 이동합니다.

이제 실행되고 있는 개발 서버를 죽이고, 아래에 명령어로 빌드해봅니다.

npm run build

문제없이 실행되면 ./dist/ 폴더가 생성되고 하위에 index.html과 /js/app.js가 생성된 것을 확인할 수 있습니다. 또한 index.html을 열어보면 우리가 만든 index.html과 다르게 <script type="text/javascript" src="/js/app.js"></script>이 추가된 것을 확인할 수 있습니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!