$ npm init
$ npm install react react-dom
$ npm install -D webpack webpack-cli
npm init
package.json 생성-D
: 개발용 $ npm install -D @babel/core @babel/preset-env @babel/preset-react babel-loader
core
: babel의 기본적인 것들preset-env
: babel이 자동으로 최신 문법으로 변경해준다.preset-react
, preset-typescript
: 리액트, 타입스크립트를 자바스크립트로 지원babel-loader
: babel과 webpack을 연결// webpack.config.js
const path = require("path");
module.exports = {
name: "project-name",
mode: 'development', // 배포 : production
devtool: "inline-source-map", // hidden-source-map
resolve: {
extensions: [".js", ".jsx"],
},
// client.jsx를 대상으로 웹팩이 빌드를 수행
entry: {
app: ["./client"],
},
module: {
rules: [
{
// babel-loader를 이용해 규칙에 적용
test: /\.jsx?/,
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
],
},
// 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
output: {
path: path.join(__dirname, "dist"),
filename: "app.js",
},
};
입력, 최초의 진입점이자 자바스크립트 파일 경로
client.jsx를 대상으로 웹팩이 빌드를 수행
// client.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import LoginPage from "./LoginPage";
ReactDOM.createRoot(document("#root")).render(<LoginPage />);
엔트리 포인트는 여러 개가 될 수도 있다. (SPA보다는 MPA에 적합)
test
: 로더를 적용할 파일 유형(정규식)loader
: js파일, jsx파일에 babel-loader를 적용하여 호환option
: babel의 옵션들path
: 빌드한 파일의 경로__dirname
: 현재 폴더filename
: 웹팩으로 빌드한 파일 이름extensions
: 생략할 확장자 설정//package.json
{
...
"scripts": {
// npm run dev
"dev": "webpack"
},
...
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"webpack": "^5.78.0",
"webpack-cli": "^5.0.1"
}
}
npm run dev
또는 npx webpack
$ npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D
$ npm i -D webpack-dev-server # 개발용 서버
{
...
"scripts": {
// dev 명령어 변경
"dev": "webpack serve --env development"
},
...
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"@babel/preset-react": "^7.18.6",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
"babel-loader": "^9.1.2",
"react-refresh": "^0.14.0",
"webpack": "^5.79.0",
"webpack-cli": "^5.0.1",
// webpack-dev-server 추가됨
"webpack-dev-server": "^4.13.3"
}
}
// webpack.config.js
const path = require("path");
// refresh 플러그인 불러오기
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
module.exports = {
...
entry: {
app: "./client",
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
targets: { browsers: ["last 2 chrome versions"] },
debug: true,
},
],
"@babel/preset-react",
],
plugins: ["react-refresh/babel"], // 추가
},
exclude: path.join(__dirname, "node_modules"),
},
],
},
plugins: [new ReactRefreshWebpackPlugin()], // 플러그인 장착
output: {
...
},
devServer: {
devMiddleware: { publicPath: "/dist" }, // 웹팩을 생성해주는 경로
static: { directory: path.resolve(__dirname) },// 실제로 존재하는 정적 파일들의 경로
hot: true,
},
};
devServer
: 프론트 개발 편의를 위한 서버참고
https://inf.run/cdib
https://joshua1988.github.io/webpack-guide/guide.html