dev-serverホットロード設定中のエラー

毎回webpackを使うnpx webpack(またはnpm run dev)
変更があるたびに構築するのは面倒だと思います.
cra(create-react-app)に内蔵された熱再ロード機能を実現できます.
講座どおりにやりました.

webpack-cliバージョン4.x.xから設定が少し変わりました.

react-refresh和@pmmmwh/react-refresh-webpack-plugin取付

$ npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D

dev-server取付

$ npm i -D webpack-dev-server 

package.jsonの「scripts」部分修正

  "scripts": {
    "dev": "webpack serve --env development"
  },
  

改訂前-「dev」:「webpack」

webpack.config.js修正

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

pluginをrequireとしてロードした後、変数として保存します.

plugins: [new ReactRefreshWebpackPlugin()]

保存した変数をpluginのnew変数名に設定します.

 output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
    publicPath: "/dist",
  },

📌 [name].jsの意味は?
filename:“[name].js”.
出力されたファイル名はentry propertyで設定された各キー値の名前で登録されます.
4-2. babel-loader設定の変更

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"],  // 👈 이부분 추가 - babelloader의 플러그인
        },
        exclude: path.join(__dirname, "node_modules"), // 👈 이부분 추가 - node_modules 폴더는 제외하라는 뜻
      },
    ],
  },

📌 loader VS plugin
Loaders Pluginパッケージの作成中または作成前に、各ファイルレベルでオペレーティングパッケージを作成してから作業します.
📌 .dirnameとの違い
__dirname.現在実行中のスクリプトを含むフォルダ作業ディレクトリ(=root)
📂 受精前

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

module.exports = {
  name: "wordrelay-setting",
  mode: "development", // 실서비스에선 'production'으로
  devtool: "eval", // 빠르게
  resolve: {
    extensions: [".js", ".jsx"],
  },

  entry: {
    app: ["./client"],
  },

  module: {
    rules: [
      {
        test: /\.jsx?/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: ["react-refresh/babel"],
        },
      },
    ],
  },

  plugins: [new RefreshWebpackPlugin()],

  output: {
    path: path.join(__dirname, "dist"), //__dirname은 현재폴더경로
    filename: "app.js",
    publicPath: '/dist/',
  },

  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    hot: true,
  },
};

📂 変更後

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

module.exports = {
  name: "word-relay-dev",
  mode: "development",
  devtool: "inline-source-map",
  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"] },
                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: "[name].js",
    publicPath: "/dist",
  },
  devServer: {
    devMiddleware: { publicPath: "/dist" },
    static: { directory: path.resolve(__dirname) },
    hot: true,
  },
};

コメントドキュメント