[React] Webpack 마는 법

IT/Front-End

[React] Webpack 마는 법

KimCookieYa 2023. 9. 18. 01:23

React webpack 마는 법

배경

인프런 - 웹 게임을 만들며 배우는 React 강의의 섹션 1에서 webpack과 babel을 직접 설치해서 세팅하는 방법을 알려준다. CRA나 Vite를 쓰지 않고 직접 세팅하면서 webpack과 babel의 동작 방식을 공부할 수 있었다. 언제든지 볼 수 있도록, npm init부터 HMR(Hot Module Reloading) 세팅까지의 과정을 기록하고자 한다.

초기 세팅

npm init
npm i react react-dom

webpack 및 babel 세팅

npm i -D webpack webpack-cli
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

// webpack.config.js
const path = require("path");

module.exports = {
  name: "wordrelay-setting",
  mode: "development",
  devtool: "eval",
  resolve: {
    extensions: [".js", ".jsx"],
  },
  entry: {
    app: ["./client"],
  }, // 입력
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  browsers: ["last 2 chrome versions"],
                },
              },
            ],
            "@babel/preset-react",
          ],
        },
      },
    ],
  }, // babel 설정
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
    publicPath: "/dist/",
  }, // 출력
};

// client.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import WordRelay from "./WordRelay.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(<WordRelay />);

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>끝말잇기</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./dist/app.js"></script>
  </body>
</html>

// WordRelay.jsx
import React from "react";

export default function WordRelay() {
  return <div>WordRelay</div>;
}

package.json의 "scripts"에 "dev": "webpack" 추가

// package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack"
  },
  "author": "KimCookieYa",
  "license": "MIT",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.20",
    "@babel/preset-env": "^7.22.20",
    "@babel/preset-react": "^7.22.15",
    "babel-loader": "^9.1.3",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

npm run dev 또는 npx webpack 입력하면 app.js 빌드 완료.

Fast Refresh(HMR) 세팅

npm i -D @pmmmwh/react-refresh-webpack-plugin react-refresh
npm i -D webpack-dev-server

// webpack.config.js
const path = require("path");
const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

module.exports = {
  name: "wordrelay-setting",
  mode: "development",
  devtool: "eval",
  resolve: {
    extensions: [".js", ".jsx"],
  },
  entry: {
    app: ["./client"],
  }, // 입력
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  browsers: ["last 2 chrome versions"],
                },
              },
            ],
            "@babel/preset-react",
          ],
          plugins: [require.resolve("react-refresh/babel")].filter(Boolean),
        },
      },
    ],
  }, // babel 설정
  plugins: [new RefreshWebpackPlugin()].filter(Boolean),
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
    publicPath: "/dist/",
  }, // 출력
  devServer: {
    devMiddleware: { publicPath: "/dist/" },
    static: { directory: path.resolve(__dirname) },
    hot: true,
  }, // fast refresh(HMR)
};

출처

인프런 - 웹 게임을 만들며 배우는 React