webpack-dev-server 不会自动更新 HTML？

Question

我将 webpack-dev-server 与 webpack v5 一起使用，出于某种原因，当我对 CSS 和 js 进行更改时，它会按预期时间更新，但对于我拥有的 HTML 文件手动刷新我的浏览器以查看新的编译版本。

src
  |-index.html
  |-index.js

webpack.config.js

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  output: {
    clean: true,
    filename: "bundel.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new htmlWebpackPlugin({
      filename: "index.html",
      template: path.resolve(__dirname, "src", "index.html"),
    }),
  ],
};

我的 package.json devDependencies

"devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }

我用 npx webpack serve --open

启动我的服务器

我添加了 CSS 文件及其相关的 CSS 加载程序进行测试，并在我确定它可以正常工作后删除它，只是 HTML 是问题所在

您可以在更改 index.html 内容时重现该问题

Answer 1

尝试使用DevServer选项重新加载页面并全部压缩。而不是运行ning npx webpack serve --open 运行 npm run start 使用此脚本配置：

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

并尝试将此基本配置用于您的 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // Default settings 
    mode:'development',
    devtool:'inline-source-map',
    entry:{
        main: path.join(__dirname,'src','index.js')
    },
    output:{
        filename:'index.js',
        path: path.resolve(__dirname,'dist'),
        clean:true,
    },
    // Loaders
    module:{
        // JavaScript
        rules:[
            { 
                test: /\.js$/i, 
                use:{ 
                loader:'babel-loader', 
                options:{ 
                    "presets":['@babel/preset-react']
                }}
            },
            // Css
            {
                test: /\.css$/i, use:['style-loader','css-loader']
            }
        ]
    },
    // Plugins
    plugins:[
        new HtmlWebpackPlugin({
            template: path.join(__dirname,'public','index.html') ,
            filename:'index.html'
        })
    ],
    // DevServer
    devServer:{
        port:8080,
        open:true,
        compress:true,
        hot:true,
        liveReload:true,
    }
};

Answer 2

问题是 webpack-dev-server 默认不观看 HTML 个文件

所以我找到了两个解决方案：

第一个解决方案是 built-in 通过添加 watchFiles:

 devServer: {
   watchFiles: ["src/*.html"],
   hot: true,
 },

第二种解决方案使用名为 browser-sync-webpack-plugin

webpack-dev-server 不会自动更新 HTML？

webpack-dev-server doesn't update HTML auto?

javascript

webpack

webpack-dev-server

html-webpack-plugin