Webpack과 vite
'create-react-app' 하나면 리액트 프로젝트 뚝딱이었지만, 최근에는 vite를 사용한다는 말이 들려서 webpack, babel 등등 이들이 그래서 뭔 역할을 하는지 궁금해졌다. 일단 대략적인 차이점은 webpack은 빌드를 하면서 모든 모듈을 하나의 번들로 제공하고, vite는 개발 서버에서 모듈을 실시간으로 번들링하고, 프로덕션 빌드 시에는 더 작은 코드 스플릿 번들을 생성하여 빠른 반응성을 제공한다는 점. 한 모듈 리플레이스먼트를 지원하고, esbuild를 사용한다고 하는데 webpack도 떼지못한 내가 알아보기엔 외계어다..
React 직접 구성하기
일단 webpack의 역할부터 체감해야한다.
1. package.json 파일 생성
npm init -y
노드 프로젝트를 시작.
2. Babel 설치
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
// .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}지바스크립트의 서로 다른 문법간의 오류를 하나로 통합해줄 바벨의 모듈을 설치
JSX와 ES
이상의 문법을 다른 브라우저가 이해할 수 있도록 ES5 문법으로 변환시켜줌
빌드 시에만 필요하기 때문에 devDependencies로 설치
- @babel/core: 바벨의 핵심 기능을 담당
- @babel/preset-react: 리액트의 JSX를 자바스크립트 코드로 변환
- @babel/preset-env: ES6 이상의 문법을 ES5로 변환해주는 프리셋
3. Webpack 설치
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader style-loader
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: { loader: "babel-loader" },
},
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
],
},
resolve: {
extensions: [".js", ".jsx"],
},
plugins: [new HtmlWebpackPlugin({ template: "./public/index.html" })],
devServer: {
static: {
directory: path.join(__dirname, "dist"),
},
hot: true,
open: true,
},
};- webpack-dev-server: 개발 모드에 필요한 서버를 구동해줌. 컴퓨터의 메모리를 빌려 웹팩을 작동시키고 임시 서버를 띄움
- css-loader, style-loader: css 문법을 자바스크립트로 변환해주는 역할 css-loader가 변환한 파일을 index.html의 '
- html-webpack-plugin: html 파일에 번들링된 리액트 코드를 삽입해줌. dist 폴더에 번들링된 파일을 옮겨주는 역할
- clean-webpack-plugin: 번들링이 완료될 때마다 이전의 번들링 결과를 제거해주는 역할
4. 기타 파일 작성
my-app/
├── public/
├── index.html
├── src/
├── App.js
├── index.js
├── .babelrc
├── package.json
├── webpack.config.js// public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Custom React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));// src/App.js
import React from 'react';
const App = () => {
return <div>Hello, word!</div>;
};
export default App;5. 스크립트 등록
"scripts": {
"start": "webpack serve --progress --mode development",
"build": "webpack"
} npm start
Vite
Go언어로 작성된 ESbuild를 번들러로 사용하여, 사전 번들링이 필요한 코드에만 적용됨. 소스코드에는 영향을 받지 않고 브라우저에서 구동시 불필요한 자원을 사용하지 않음(그래서 빠르다.)
그치만 아직 CRA가 오랫동안 사용된만큼 검증된 모듈과 안정적인 절차를 가지고 있다. 아직 vite의 기술의 일부는 불안정성을 가지고 있음. So, 아직은 가벼운 사이드 혹은 토이 프로젝트에 vite를 유용하게 사용하고, 정규 프로젝트는 CRA를 사용하는 편.
