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

【问题标题】：Hot Module Replacement Not working Reload always happening热模块更换不工作总是发生重新加载
【发布时间】：2022-07-18 14:43:46
【问题描述】：

我似乎无法弄清楚如何让热模块更换工作。每次我对我的 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 中添加选项标签

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

【问题讨论】：

您能否提供 Webpack 记录到浏览器控制台的内容？不要忘记检查“保留日志”
面临类似的问题，但style-loader。问题是devServer.static 中指定的文件夹包含我的应用程序，因此 Webpack 认为整个源代码是静态的，并在每次更新时刷新页面。

标签： javascript webpack package.json hot-module-replacement

【解决方案1】：

要了解 Hot Module Reload 的工作原理和设置，您可以查看我的帖子 here。如果您不将其与 Docker 一起使用，请删除 --host 0.0.0.0。

【讨论】：