물론 CRA를 이용하면 간편하게 리액트 프로젝트를 만들 수 있다. 프로젝트 만드는 시간도 절약되고 다른 거를 찾아 볼 필요도 없다.
하지만 CRA는 뭐랄까 종합선물세트같은 느낌이다. 너가 뭘 필요할지 몰라서 기본적인 거 다 준비해봤어. 같은 느낌이랄까? 그래서 나는 내가 필요한 기능만 적절하게 첨가해서 프로젝트를 생성하기 위해 Webpack을 배우기로 했다!🕺
우선 한가지 밝히자면 이번 글은 한 곳에서 너무나도 잘 설명이 되어 있기 때문에 많은 부분이 비슷하다. 하지만 내가 다시 한번 정리하는 차원 + 따라하다 나온 이슈 하나 해결 이 두가지 이유로 글을 적고있다. 원본은 이후 출처에 게시하겠지만 지금 바로 원본이 보고 싶으시다면 여기로 가시면 됩니다.
mkdir react_project
cd react_project
npm init -y
npm i react react-dom
npm i -D 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을 동작시키기 위한 script를 추가합니다.
{
"name": "react_project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve --mode development",
"prebuild": "rimraf dist",
"build": "webpack --progress --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.5",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"html-webpack-plugin": "^5.3.1",
"rimraf": "^3.0.2",
"webpack": "^5.39.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}
script 명령어 설명
"start": "webpack 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.config.js
파일을 생성하고 다음과 같이 설정합니다.
const path = require('path'); //절대경로를 참조하기 위해 path를 불러오기
const HtmlWebpackPlugin = require('html-webpack-plugin'); //웹팩에서 HTML을 다루기위한 플로그인을 불러오기
module.exports = {
// 번들 파일로 만들기 위한 시작 파일(entry)을 설정
//생성될 번들 파일은 js 폴더 하위에 app.js라는 이름으로 생성
//이 파일은 ./src/App.jsx를 시작으로 번들링(하나로 합치기)합니다.
entry: {
'js/app': ['./src/App.jsx'],
},
//생성된 번들 파일(bundle)은 ./dist/ 폴더에 생성
//publicPath를 지정함으로써 HTML등 다른 파일에서 생성된 번들을 참조할 때, /을 기준으로 참조
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/',
},
//React(리액트) 파일인 jsx와 js는 babel(바벨)을 이용하여 빌드
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ['babel-loader'],
exclude: /node_modules/,
},
],
},
//./src/index.html 파일을 dist 경로에 index.html로 파일을 생성
//파일을 생성할 때, Webpack(웹팩)이 만든 번들 파일(/js/app.js)를 HTML에 추가하여 생성
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
],
};
루트 디렉토리에 .babelrc
를 생성하고 아래와 같이 설정합니다.
{
"presets": [
[
"@babel/preset-env",
{ "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } }
],
"@babel/react"
]
}
babel(바벨)로 컴파일 할 때, targets을 지정해줬어요. 브라우저의 상위 버전 두개(예: IE 11, 10)와 한국(KR)에서 5% 이상의 점유율을 가지고 있는 브라우저에 대응하여 컴파일되도록 설정했어요. 그리고 "@babel/react"을 통해 React(리액트)도 컴파일될 수 있도록 설정했어요.
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>
./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!가 보이면 정상적으로 프로젝트를 시작한 것이다.
npm start
가 잘 작동한다면 build
도 해보자.
npm run build
실행되면 ./dist/ 폴더와 하위에 index.html
과 /js/app.js
가 생성된 것을 확인할 수 있다. 또한 index.html
을 열어보면 우리가 만든 index.html
과는 다르게 <script type="text/javascript" src="/js/app.js"></script>
이 추가된 것을 확인할 수 있다.
이제 웹팩으로 리액트 프로젝트를 만들 수 있다 정도인 것 같다. 웹팩을 더 공부해서 앞으로는 내가 원하는 프로젝트를 가볍게 시작할 수 있다면 좋을 것 같다.👍
💡직접 읽어보면 뼈가 되고 살이 되는 출처
👉https://dev-yakuza.posstree.com/ko/react/start/
👉https://stackoverflow.com/questions/59611597/error-cannot-find-module-webpack-cli-bin-config-yargs