热模块更换不工作总是发生重新加载

Question

我似乎不知道如何进行热模块更换。每次我更改html文件或CSS文件时，webpack都会刷新以显示更改。

webpack.config.js

const path = require('path')
const postCSSPlugins = [
require('postcss-simple-vars'),
require('postcss-nested'),
require('autoprefixer'),
require('postcss-import')
]
module.exports = {
entry: './app/assets/scripts/App.js',
output: {
filename: 'bundled.js',
path: path.resolve(__dirname, 'app')
},
devServer: {
watchFiles: ('./app/**/*.html'),
static: path.join(__dirname, 'app'),
hot: true,
port: 3000,
host: '0.0.0.0'
},
mode: 'development',
module: {
rules: [
{
test: /.css$/i,
use: ['style-loader','css-loader', {loader: 'postcss-loader', options: {postcssOptions: {plugins: postCSSPlugins}}}]
}
]
}
}

package.json

"scripts": {
"dev": "webpack serve --hot",
"test": "echo "Error: no test specified" && exit 1"
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"css-loader": "^6.6.0",
"postcss-import": "^14.0.2",
"postcss-loader": "^6.2.1",
"postcss-nested": "^5.0.6",
"postcss-simple-vars": "^6.0.3",
"style-loader": "^3.3.1",
"webpack": "^5.69.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
}

App.js

import '../styles/styles.css'
if(module.hot) {
module.hot.accept(function() {
console.log("Accepting the updated modules...")
})
}

我试过的。。

• 我尝试过使用hotOnly选项，但它已被删除
• 我已尝试在package.json文件的CLI中添加选项标记

似乎什么都不起作用。每当我进行更改时，整个页面都会刷新。

Answer 1

要了解热模块重新加载的工作原理和设置，您可以查看我的文章。如果您不将--host 0.0.0.0与Docker一起使用，请将其删除。