Замена горячего модуля WebPack (HMR) и Live Reload Не работают для JS и HTML -изменений ⇐ Html

[Anonymous]

Я работаю над проектом ресторана Odin Project и использую Webpack для объединения моего кода. Однако, когда я внося изменения в src/index.js или src/template.html, они не отражаются в браузере, пока я не перезагружаю сервер разработки, используя начало NPM. Я ожидаю замены горячего модуля (HMR) или перезагрузку в прямом эфире работы без перезапуска сервера.
ожидаемое поведение:
Когда я изменяю index.js или template.html и сохраняю файлы, я ожидаю, что браузер автоматически отражает эти изменения.
Фактическое поведение:
seving index.js или template.html не запускает обновление браузера.
Я вижу следующее сообщение на консоли браузера: < /p>
< Br /> [webpack-dev-server] Запуск запуска: замена горячего модуля включена,
Live Reloading включено, прогресс отключен, включено наложение.
index.js:577 [HMR] В ожидании обновления сигнал от wds ...

Что я пробовал:
< br/> I модифицировал devserver.watchfiles от ["./ src/template.html"] to
strong> "./src/*"ty, думая, что это обнаружит изменения во всех файлах в разделе
src /, но это не сработало. Он на Firefox (V135.0) и Chrome (V132.0.6834.160). < /li>
подтвердил, что сохранение webpack.config.js запускает обновления в терминале
, но но, но, но, но, но, но, но, но, но, но, но, но, но, но, но, но, но, но, но, но, но, но, но но Сохранение файлов JS или HTML не имеет.

Код: Выделить всё

.
├── dist
│   ├── index.html
│   └── main.js
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   ├── style.css
│   └── template.html
└── webpack.config.js

файлы:
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
clean: true,
},
devtool: "eval-source-map",
devServer: {
static: './dist',
watchFiles: ['./src/*'],
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/template.html",
title: 'Development',
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
],
},
};
< /code>
package.json
{
"name": "restaurant-page",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack serve --open",
"build": "webpack"
},
"devDependencies": {
"css-loader": "^7.1.2",
"html-loader": "^5.1.0",
"html-webpack-plugin": "^5.6.3",
"style-loader": "^4.0.0",
"webpack": "^5.97",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.0"
}
}
< /code>
Вопросы: < /strong> < /p>

Есть ли что -то не так с моей конфигурацией Webpack, которая предотвращает горячий модуль Замена или перезагрузка в прямом эфире от правильной работы? >
Заранее спасибо за помощь! < /p>

Подробнее здесь: https://stackoverflow.com/questions/794 ... s-and-html