리액트 공부를 하면서 CRA와 Vite를 주로 사용해서 프로젝트를 생성했다.
CRA와 Vite 중 뭘 사용할까 고민해본 적은 있지만, Webpack으로 직접 설정해볼까 고민해본 적은 없다.
(※ CRA는 webpack을 사용하고 있고 Vite는 개발 단계에서는 ESM을, 빌드 단계에서는 Rollup을 사용한다.)
좋은 기회를 얻어서 Webpack을 사용하여 프로젝트를 생성해보게 되었다.
// Webpack
Webpack이란, 자바스크립트의 정적 모듈 번들러(Static Module Bundler)이다.
자바스크립트 애플리케이션의 개발 단계에서 여러 개의 모듈을 하나의 파일이나 여러 파일로 결합하는 역할을 한다.
설정이 자유로워 높은 확장성과 유연성을 가진다.
webpack 버전 4.0.0 이후로는 설정 파일이 없어도 되지만, 대부분은 맞춤 설정을 위해 설정 파일을 사용한다.
▪ webpack 및 babel 설치
babel은 자바스크립트 코드를 최신 브라우저와 호환되도록 변환해주는 도구이다.
특히, 리액트 애플리케이션을 빌드할 때 ES6+ 및 JSX 문법을 변환해주기 때문에 필수라고 생각하면 된다.
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react▪ .babelrc 설정
루트 디렉토리에 .babelrc 파일을 생성 후 설정을 해줘야 자바스크립트 최신 문법과 JSX 코드를 변환해준다.
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
▪ webpack.config.js 설정
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = () => {
return {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
resolve: {
extensions: ['.js', '.jsx'],
},
devServer: {
port: 3000,
hot: true,
open: true,
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
exclude: /node_modules/,
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
}),
],
};
};- entry: webpack의 번들링 시작 지점을 지정한다.
- output
- filename: 생성된 번들 파일명
- path: 번들 파일이 생성된 경로
- clean: 빌드할 때마다 이전 파일을 삭제할 것인지 여부(true: 삭제)
※ webpack 5부터 사용 가능한 옵션이다. - resolve
- extentions: webpack이 해석할 파일 확장자로, import 문에서 파일 확장자를 생략할 수 있게 해준다. - devServer
- port: 개발 서버가 실행될 포트
- hot: 핫 모듈 교체(Hot Module Replacement, HMR) 활성화 여부(true: 활성화)
- open: 개발 서버 시작 시 브라우저를 자동으로 열 것인지 여부(true: 열기)ㅎ - devtool
- module > rules
- test: 규칙을 적용할 파일의 확장자
- use: 사용할 loader
- exclude: 규칙 적용에서 제외할 파일 - plugins : HtmlWebpackPlugin을 통해 HTML 파일에 번들된 자바스크립트 파일을 포함한다.
▪ 폴더 구조
루트 디렉토리 /
│
├── src/
│ ├── components
│ ├── index.html
│ └── index.js
├── .babelrc
├── package.json
└── webpack.config.js
▪ package.json 설정
Webpack을 실행할 수 있는 scripts를 추가한다.
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
},▪ index.html 파일 생성
head는 자유롭게 설정하되, body의 div id='root'는 그대로 설정한다.
아이디명 자체는 root 아니고 다른 걸로 해도 상관은 없지만, root로 설정하는 것이 일종의 관례이다.
<!doctype html>
<html lang="ko">
<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>Webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
▪ index.js 파일 생성
나는 주로 root 컴포넌트를 App으로 설정하는 편이다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);▪ 개발 서버 실행
npm start이번에 내가 한 설정은 기본에 충실했다고 할 수 있다.
production과 dev를 나누려면 process.env를 활용해야 하고, 타입스크립트를 사용한다면 확장자에 .ts와 .tsx를 추가하는 등 더 해야 할 것들이 많다.
'클라이언트 > React' 카테고리의 다른 글
| [리액트(React)] Gatsby - Contentful (0) | 2024.04.30 |
|---|---|
| [리액트(React)] Gatsby (0) | 2024.04.26 |
| [리액트(React)] Vercel로 React 프로젝트 배포하기 (0) | 2024.04.19 |
| [리액트(React)] 드래그 앤 드롭(drag & drop) (0) | 2024.04.05 |
| [리액트(React)] Github page 배포 (0) | 2024.04.01 |
