Webpack devServer v.4.xx 实时重新加载不起作用

Question

我正在遵循这些webpack 5 指南，并且 webpack-dev-server v4.3.1 不会实时重新加载示例项目（编辑任一 JavaScript 文件后确实会发生重新编译）。也许我错过了一步？

1.你能告诉我问题出在哪里吗？

这是我的配置：

包.json

{
  "name": "components",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "devDependencies": {
    "autoprefixer": "^10.3.7",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.3.9",
    "tailwindcss": "^2.2.16",
    "webpack": "^5.58.1",
    "webpack-cli": "^4.9.0",
    "webpack-dev-middleware": "^5.2.1",
    "webpack-dev-server": "^4.3.1"
  },
  "scripts": {
    "start": "webpack serve --open",
  },
  "repository": {
    "type": "git",
    "url": "components"
  },
  "author": "Karl",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

webpack.config.js

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

module.exports = {
    mode: 'development',
  entry: {
    index: './src/index.js',
    print: './src/print.js',
  },
  devServer: {
    static: { 
            directory: './dist',
            watch: true
        },
  },
    plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management',
    }),
  ],
    output: {
    filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    }
};

下面是运行 npm start 脚本的结果（./src 中的 2 个文件，index.js 和 print.js，是从上面链接的指南复制的）。如果我编辑任一文件，实时重新加载将不起作用，但在手动刷新浏览器后，编辑会得到反映。

如果重要的话，以上内容来自 VS Code 的 Bash 终端，并且我运行的是 Windows 10。

2）奖励：为了实时重新加载位于项目根文件夹中的静态index.html 文件，我需要进行哪些配置更改？

Answer 1

这个配置应该可以解决问题：

devServer: {
    hot: false, // optional, but you must not set both hot and liveReload to true
    liveReload: true
}

静态index.html的实时重新加载可以通过此插件配置来实现：

plugins: [
  ...,
  new HtmlWebpackPlugin({ template: "src/index.html" })
]