Webpack devServer v. 4.x.x 实时重新加载不起作用答案

【问题标题】：Webpack devServer v. 4.x.x live reload not workingWebpack devServer v. 4.x.x 实时重新加载不起作用
【发布时间】：2021-12-01 03:37:27
【问题描述】：

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

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

这是我的配置：

package.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 文件？

【问题讨论】：

标签： webpack webpack-dev-server

【解决方案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" })
]

【讨论】：

我已经准备好回答我自己的问题了，但我看到你打败了我。这两个选项的默认值（即 true ）不兼容似乎很奇怪。但请注意，如果配置了devServer.watchFiles per the docs，它们都可能为真。此外，指南没有提到需要安装 HotModuleReplacementPlugin 并且它没有像 webpack 文档暗示的那样自动添加到我的节点模块中。我仍然无法自动重新加载静态 index.html 文件。也许我会发布另一个问题。
我的静态 index.html 使用此插件配置实时重新加载：new HtmlWebpackPlugin({ template: "src/index.html" })。我觉得这很有趣，webpack 如何通过非常相似的配置导致非常不同的结果。
非常好。那成功了。因回答奖金问题而被投票赞成。
谢谢?。我相应地更新了我的答案。