Webpack devServer v.4.x.x 实时重新加载不工作

Question

我正在遵循这些 webpack 5 指南，并且 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 启动脚本的结果（./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" })
]

Answer 2

哦！非常感谢！将热切换为假实时重新加载后开始工作！