Webpack를 이용해 react환경을 만들기

프로젝트 준비

1
2
3

mkdir react_start
cd react_start
npm init -y

프로젝트에 필요한 라이브러리 설치

1
2
3
4

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

• react, react-dom: React 개발에 필수 라이브러리 입니다.
• webpack : 웹팩으로 javascript 모듈 번들러이자 개발에 도구로 이용됩니다.
• ebpack-cli : 웹팩을 명령어로 조작하기 위한 라이브러리 입니다.
• html-webpack-plugin: 웹팩에서 HTML을 다루기 위한 라이브러리 입니다.
• webpack-dev-server: 웹팩을 이용하여 개발용 로컬
• babel-loader: Webpack에서 바벨을 다루기 위한 라이브러리 입니다.
• @babel/core: 바벨로 컴파일하기위한 라이브러리 입니다.
• @babel/preset-env: babel(바벨)로 컴파일시 브라우저를 어떤 타겟 으로 할지 플러그인을 사용 하여
• @babel/preset-react: React(리액트)를 babel(바벨)로 컴파일하기 위한 라이브러리입니다.
• rimraf: Mac과 윈도우즈에서 동일한 명령어로 폴더를 삭제하기 위한 라이브러리입니다.

Package.json 설정

아래와 같이 웹팩을 동작하기 위한 config 스크립트를 추가합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

{
  "name": "react_start",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "prebuild": "rimraf dist",
    "build": "webpack --progress --mode production"
  },
  "keywords": [],
  "author": "angelring127@gmail.com",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.2",
    "rimraf": "^3.0.2",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  }
}

위에 스크립트를 하나씩 설명 해보자

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

Webpack 설정

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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(웹팩) 설정을 하나씩 살펴 봅시다.

1

const path = require('path');

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

1

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

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

1
2
3

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

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

1
2
3
4

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

​ 생성된 번들 파일(bundle)은 ./dist/ 폴더에 생성됩니다. publicPath를 지정함으로써 HTML 등 다른 파일에서 생성된 번들을 참조할 때, /을 기준으로 참조합니다.

1
2
3
4
5
6
7
8
9

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

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

1
2
3
4
5
6

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

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

babel 설정

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

1
2
3
4
5
6
7
8
9

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

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

HTML 만들기

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

1
2
3
4
5
6
7
8
9
10

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