Webpack 5开发服务器热重载刷新页面。

Question

我在热重载方面遇到了麻烦，页面刷新而不是热重载。

我对webpack不是很熟悉，我选择了一个webpack 4仓库来更新为webpack 5，然后将TypeScript添加到其中。

这是package.json文件。

{
  "name": "remote-dashboard-starter",
  "version": "1.0.0-semantic-versioning",
  "description": "Remote Dashboard Starter",
  "private": true,
  "browser": "dist/main.js",
  "author": "SS",
  "license": "MIT",
  "scripts": {
    "build": "npm run clean && cross-env NODE_ENV=production webpack --mode production",
    "build:dev": "npm run clean && cross-env NODE_ENV=development webpack --mode development",
    "webpack-dev-server": "cross-env NODE_ENV=development webpack serve --port 9090 --config webpack-dev-server.config.js",
    "start": "concurrently -n webpack,webpack-dev-server -c green,cyan \"npm run build:dev\" \"npm run webpack-dev-server\"",
    "start2": "npm run build:dev && webpack && webpack-dev-server",
    "start:remote": "concurrently \"npm run build -- --watch\" \"serve dist --cors -p 9999\"",
    "clean": "rimraf dist",
    "test": "echo no tests",
    "test:changed": "npm run test -- --changedSince HEAD",
    "test:coverage": "npm run test -- --coverage",
    "lint": "eslint .",
    "serve": "webpack serve"
  },
  "dependencies": {
    "@ionic/react": "6.4.2",
    "@ionic/react-router": "6.4.2",
    "@microsoft/signalr": "^7.0.2",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "chartjs": "^0.3.24",
    "ionicons": "^6.1.3",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.1.0",
    "react-dom": "^18.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "^7.12.10",
    "@babel/preset-react": "^7.12.10",
    "@babel/preset-typescript": "^7.18.6",
    "@babel/runtime": "^7.12.5",
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
    "@paciolan/eslint-config-react": "^1.0.4",
    "@paciolan/remote-component": "^2.10.2",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "concurrently": "^5.3.0",
    "core-js": "^2.6.12",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.3",
    "eslint": "^7.15.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-prettier": "^3.3.0",
    "eslint-plugin-react": "^7.21.5",
    "html-webpack-plugin": "^5.5.0",
    "prettier": "^2.2.1",
    "react-dom": "^18.2.0",
    "regenerator-runtime": "^0.13.7",
    "rimraf": "^3.0.2",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.4.2",
    "webpack": "^5.75.0",
    "webpack-assets-manifest": "^5.1.0",
    "webpack-bundle-analyzer": "^4.7.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

这里是webpack-dev-server.config.js文件。

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
const config = require("./webpack.config");

module.exports = {
  entry: "./src/webpack-dev-server.tsx",
  plugins: [
    ...config[0].plugins,
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "src/index.html"
    }),
    new webpack.EnvironmentPlugin({
      "process.env.NODE_ENV": process.env.NODE_ENV
    })
    // new webpack.NamedModulesPlugin(),
    // new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    moduleIds: "named"
  },
  module: config[0].module,
  devServer: {
    hot: true,
    open: true,
    static: __dirname,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers":
        "X-Requested-With, content-type, Authorization"
    }
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    alias: {
      "remote-component.config.js": path.resolve("./remote-component.config.js")
    },
    fallback: {
      http: false,
      https: false
    }
  },
};

控制台没有显示任何问题，除了在使用带有npm start的dev服务器保存一些更改后，它会显示Navigating to http: //localhost:9090。

CLI确实输出了很多内容，但我找到了这个。

[webpack-dev-server] <i> [webpack-dev-middleware] wait until bundle finished: /
[webpack-dev-server] Error parsing bundle asset "D:\dashboard-modules\iotaboard-dashboard-rwth\dist\main.0b2b661771b9f2501667.hot-update.js": no such file

我一直在搜索，但是我找不到为什么它会刷新而不是热重载的线索。可能是什么原因呢？提前致谢。

- Seiko Santana

Answer 1

我发现在我的情况下，我必须使用react-refresh才能正确地实现热重载。

https://github.com/pmmmwh/react-refresh-webpack-plugin

我按照自述文件中的安装指南进行了操作，问题得到了解决。

  "scripts": {
    "build": "npm run clean && cross-env NODE_ENV=production webpack --mode production",
    "build:dev": "npm run clean && cross-env NODE_ENV=development webpack --mode development",
    "clean": "rimraf dist",
    "start": "cross-env NODE_ENV=development webpack serve --mode development --env development --config webpack.config.js --open --port 9090",
    "serve": "concurrently \"npm run build -- --watch\" \"serve dist --cors -p 9999\"",
    "lint": "eslint ."
  },

如果您感兴趣，这是完整的webpack配置

/**
 * generates the dist/index.html and dist/demo.js files
 * to demo the component.
 */

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const ReactRefreshTypeScript = require('react-refresh-typescript');

const path = require("path");
const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.EnvironmentPlugin({
      "process.env.NODE_ENV": process.env.NODE_ENV
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new ReactRefreshWebpackPlugin()
  ],
  entry: {
    demo: "./src/demo.tsx"
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve("ts-loader"),
            options: {
              getCustomTransformers: () => ({
                before: [ReactRefreshTypeScript()]
              }),
              transpileOnly: true
            }
          }
        ]
      },
      {
        test: /\.(css)$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  devtool: "source-map",
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    fallback: {
      http: false,
      https: false
    },
    alias: {
      "remote-component.config.js": path.resolve("./remote-component.config.js")
    }
  }
};

- Seiko Santana