我在热重载方面遇到了麻烦,页面刷新而不是热重载。
我对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
我一直在搜索,但是我找不到为什么它会刷新而不是热重载的线索。可能是什么原因呢?提前致谢。