[웹 게임을 만들며 배우는 React] - 웹팩 데브 서버, 핫 리로딩

 

출처: https://www.inflearn.com/course/web-game-react/dashboard

[무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의

 

출처 : https://github.com/ZeroCho/react-webgame/tree/master/2.%EB%81%9D%EB%A7%90%EC%9E%87%EA%B8%B0

GitHub - ZeroCho/react-webgame

 

 

* 핫 리로딩이 필요한 이유

▶ 수정할 때마다 웹팩을 빌드해야 함

▶ 번거로움 늘어남

▶ 수정할 때마다 바로바로 확인이 되고 싶음 = 핫 리로딩 사용

 

 

* 새로고침과 핫 리로딩의 차이

- 새로고침 : 화면을 바꿀 때마다 기존 데이터가 날라감

- 핫 리로딩 : 화면을 바꿀 때마다 기존 데이터는 유지됨

 

 

https://ba-gotocode131.tistory.com/233

[웹 게임을 만들며 배우는 React] - Hoonks, 웹팩

▶ 이 프로젝트에서 핫 리로딩 추가됨

 

 

1.터미널에 설치할 것들 

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

 

 

2. webpack.config.js에서 설치한 내용 추가

- path : 실제 경로
- publicPath : 가상의 경로(node의 express.static과 비슷함)

const path = require("path");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); //추가

module.exports = {
  name: "gugudan-setting",
  mode: "development",
  devtool: "eval",
  entry: {
    app: "./client",
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },

  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: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
  },
  	//추가
	devServer: {
    devMiddleware: { publicPath: "/dist" },
    static: { directory: path.resolve(__dirname) },
    hot: true,
  },
};

 

 

3. package.json 내 scripts 부분 수정

{
  "name": "webpack_gugudan",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  	//이 부분 수정함
    "dev": "webpack serve --env development"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.19.1",
    "@babel/preset-env": "^7.19.1",
    "@babel/preset-react": "^7.18.6",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "babel-loader": "^8.2.5",
    "react-refresh": "^0.14.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }
}

 

4. 터미널 창에서 npm run dev를 치고 결과 확인