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

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< /code> 选项，但它已被删除
• 我尝试在我的 package.json 文件中的 CLI 中添加选项标签，

但似乎没有任何效果。每当我进行更改时，整个页面都会刷新。

Answer 1

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