尝试在 Webpack 上实时重新加载/HMR 时，我在浏览器控制台中收到以下错误。它发生在我在文件更改后保存后。
[HMR] 更新失败:错误:无法获取更新 list 内部服务器错误
我正在设置的 React 应用程序当前正在端口 8000 上运行，这可能是它失败的原因吗？
有趣的是，当我设置“writeToDisk: true”时，它似乎可以工作，但我会积累大量热更新 js 文件，这些文件会堵塞源目录，因此这不是最佳选择。
我确信我缺少一些相当简单的东西。任何帮助都会很棒。
谢谢。
这是我的 webpack 配置:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = function(_env, argv) {
const isProduction = argv.mode === "production";
const isDevelopment = !isProduction;
return {
devtool: isDevelopment && "cheap-module-source-map",
entry: [
"./src/index.js",
"./src/app.scss"
],
output: {
path: path.resolve(__dirname, "../client/assets/"),
filename: "js/main.js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
cacheCompression: false,
envName: isProduction ? "production" : "development"
}
}
},
{
test: /\.s[ac]ss$/i,
exclude: /node_modules/,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
]
},
resolve: {
extensions: [".js", ".jsx"]
},
plugins: [
isProduction &&
new MiniCssExtractPlugin({
filename: "main.css",
chunkFilename: "main.chunk.css"
})
].filter(Boolean),
devServer: {
contentBase: path.join(__dirname, "../client/assets/js"),
publicPath: "/",
port: '8080',
compress: true,
hot: true,
// writeToDisk: true,
watchContentBase: true
}
};
};```
最佳答案
如果将来有人像我一样绝望，找到解决方案!
捆绑的 js 文件需要导入到 webpack 开发服务器运行的同一端口上的 html 中。这是我更新的 webpack 配置:
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = function(_env, argv) {
const isProduction = argv.mode === "production";
const isDevelopment = !isProduction;
return {
devtool: isDevelopment && "cheap-module-source-map",
mode: 'development',
entry: [
"./src/index.js",
"./src/app.scss"
],
output: {
path: path.resolve(__dirname, "../client/assets/"),
filename: "js/main.js",
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
cacheCompression: false,
envName: isProduction ? "production" : "development"
}
}
},
{
test: /\.s[ac]ss$/i,
exclude: /node_modules/,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
]
},
resolve: {
extensions: [".js", ".jsx"]
},
plugins: [
isProduction &&
new MiniCssExtractPlugin({
filename: "main.css",
chunkFilename: "main.chunk.css"
})
].filter(Boolean),
devServer: {
port: '8080',
hot: true,
compress: true,
}
};
};
这是我的 html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
</div>
<script src="http://localhost:8080/js/main.js"></script>
</body>
</html>
希望这对将来的某个人有帮助。
关于javascript - Webpack开发服务器: [HMR] Update failed: Error: Failed to fetch update manifest Internal Server Error，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67131863/