0. 들어가며
처음 React를 공부할때, 보통 CRA(create react app)을 사용해서 프로젝트를 만들지만 Webpack과 Babel을
공부하는 겸 한번 빈 페이지에서 프로젝트를 만들어보겠다.
1. 세팅 및 패키지 설치
npm init
npm init 명령어를 통해서 package.json을 만들어주자!
npm i --s react react-dom
React 프로젝트를 만들 것이기 때문에 당연히 react와 react-dom을 설치한다.
npm i -D --s webpack webpack-cli webpack-dev-server
- webpack : webpack을 사용해서 프로젝트를 만들기 때문에 당연히 설치한다.
- webpack-cli : 커맨드 라인에서 webpack을 사용할 수 있게 해주는 패키지이다.
- webpack-dev-server : CRA를 통해 개발할 때 수정하면 자동으로 최신화가 되는 hot-reload 설정에 필요하다.
npm i --s html-webpack-plugin
- html-webpack-plugin : webpack이 html 파일을 읽어서 로드할 수 있도록 도와준다.
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader html-loader css-loader style-loader file-loader
- @babel/core : 모든 브라우저에서 지원할 수 있도록 es6문법을 바꿔주는 역할을 한다.
- @babel/preset-~ : babel의 플러그인들로 react, env 외에도 typescript 등 존재한다.
- babel-loader : jsx를 js로 바꾸어서 jsx를 이해할 수 있도록 해준다.
2. webpack 설정하기
루트 폴더 내에서 webpack.config.js라는 파일을 생성해준다.
이 파일은 webpack의 세팅을 해주는 파일이다.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "main.js",
},
resolve: {
extensions: [".js", ".jsx"],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_module/,
use: {
loader: "babel-loader",
},
},
{
test: /\.html$/,
use: ["html-loader"],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "img",
},
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "font",
},
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
title: "Test Title",
meta: {
"X-UA-Compatible": {
"http-equiv": "X-UA-Compatible",
content: "IE=edge",
},
},
favicon: `favicon.svg`,
}),
],
};단락 별로 설명을 하자면,
entry
어플리케이션이 시작되는 파일을 의미한다.
여러 컴포넌트로 나뉘어진 js 파일을 하나의 index.js에 모아서 실행하는 시작점이라는 뜻이다.
따로 설정하지 않아도 webpack의 기본 설정으로 src/index.js를 찾게되지만, 유지보수 및 협업을 위해서 선언해둔다.
output
webpack에 의해서 변환된 코드들이 생성되는 곳이다.
우리가 build를 할 경우 dist 폴더 안 main.js라는 파일을 작성해준다. entry와 마찬가지로 기본적으로 설정되어있다.
resolve
프로젝트에서 번들링 될 파일의 확장자를 등록한다.
module
rules에 loader를 통해서 js가 아닌 파일들을 읽을 수 있게 해준다.
test는 파일의 종류를 설정하고, use는 파일에 어떤 loader를 사용할 것인지, options을 통해 추가 설정을 할 수 있다.
css 설정의 경우 use를 통해 복수의 loader가 들어있는데, use는 배열의 역순으로 실행되는 특징이 있다.
즉, css-loader를 통해 css 파일을 읽고 style-loader를 통해 최종적으로 읽어준다.
plugins
webpack 안에 다양한 플러그인을 적용할 수 있는 곳이다. 이부분은 추후 심화에서 좀더 찾아볼 예정이다.
3. babel 설정하기
바벨 설정을 적용하기 위해서 .babelrc라는 파일을 루트폴더에 만들어준다.
{
"presets": ["@babel/env", "@babel/react"]
}
4. 프로젝트 세팅하기
루프 폴더에 public 폴더를 만들어주고, public 폴더 안에 index.html을 만들어 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Project!</title>
</head>
<body>
<div id="root"></div>
</body>
</html>추후 작성한 프로젝트 내용이 <div id="root"></div> 안에 들어가게 된다.
이제 루트 폴더에 마찬가지로 src 폴더를 만들어주고, index.js와 App.js를 만들어준다.
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));import React from "react";
const App = () => {
return (
<div>
<h1>Hello! Webpack World!</h1>
</div>
);
};
export default App;프로젝트 형식이 CRA 방식으로 개발했을때와 똑같다고 느낄 것이다. 우리가 프로젝트를 만드는 방식을 cra로 한것이
아닌 webpack, babel을 이용했을 뿐이지 설정 외 내부는 당연하게 유사할 것이다.
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},package.json에 start와 build 스크립트를 작성한다.
open 옵션은 start 시 자동으로 브라우저를 열어주는 옵션이고, hot 옵션은 코드 수정 시 자동으로 최신화 하는 옵션
5. 깃허브에서 확인해보기
현재까지 작업한 내용을 깃허브를 통해서 프로젝트를 보고싶다면 아래 링크를 통하면 된다.
'React > 실험실' 카테고리의 다른 글
| [React] Babel (2) | 2022.04.04 |
|---|---|
| [React] Webpack 환경에서 환경변수 사용 (1) | 2022.03.29 |
| [React] Code Splitting (1) | 2022.03.24 |
| [React] html-webpack-plugin? (1) | 2022.03.23 |
| [React] webpack 과 babel로 프로젝트에 폰트 파일 적용하기 (0) | 2022.03.22 |