WebPack Dev Server 在更改我的 SCSS 时不会实时重新加载我的第二个 HTML 页面，但在更改我的 HTML 或 JS 文件时会实时重新加载

Question

Webpack 不会实时重新加载新编译的 SCSS 代码。当我更改 HTML 时，它会重新加载。当我更改 JS 文件时，它也会实时重新加载。

我最近所做的更改是添加了第二个 HtmlWebpackPlugin，这样我就可以处理下一个 HTML 页面了。以下是问题发生位置的分步说明：

What I did	Webpack Dev Server
edit script.js	live realod updates site
edit archive-book.html	live reload updates site
edit stylesheet for archive-book.html	live reload does NOT update site
edit post.html	live reload updates site
edit stylesheet for post.html	live reload updates site
hard refresh browser	does not update site with new stylesheet

为了使样式真正应用于页面，我需要关闭服务器并重新启动它。
这就像它正在缓存它第一次加载的样式表，然后即使代码重新编译，它也只是加载最后一个缓存的样式表。

webpack.common.js

    const path = require("path");
    
    module.exports = {
      entry: "./dev/script.js",
    
      module: {
        rules: [
          {
            test: /\.html$/i,
            use: ["html-loader"],
          },
          {
            test: /\.(svg|png|jpg)$/i,
            use: {
              loader: "file-loader",
              options: {
                esModule: false,
                name: "[name].[hash].[ext]",
                outputPath: "assets/images",
              },
            },
          },
        ],
      },
      devtool: "source-map",
    };

webpack.dev.js

    const path = require("path");
    const common = require("./webpack.common.js");
    const { merge } = require("webpack-merge");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    module.exports = merge(common, {
      mode: "development",
      plugins: [
        new HtmlWebpackPlugin({
          template: "./dev/post.html",
          filename: "post.html",
        }),
        new HtmlWebpackPlugin({
          template: "./dev/archive-book.html",
          filename: "archive-book.html",
        }),
      ],
      module: {
        rules: [
          {
            test: /\.scss$/i,
            use: ["style-loader", "css-loader", "sass-loader"],
          },
        ],
      },
      devServer: {
        contentBase: path.join(__dirname, "dist"),
        watchContentBase: true,
        inline: true,
        hot: true,
        compress: true,
        port: 8080,
      },
      output: {
        filename: "script.dev.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "./",
      },
    });

当我编辑我的 SCSS 文件并保存时，webpack 会编译，但不会重新加载。
还有控制台。

这是我的依赖项

    "devDependencies":  {
      "clean-webpack-plugin":  "^3.0.0",
      "css-loader":  "^5.0.1",
      "file-loader":  "^6.2.0",
      "html-loader":  "^1.3.2",
      "html-webpack-plugin":  "^4.5.0",
      "mini-css-extract-plugin":  "^1.3.3",
      "optimize-css-assets-webpack-plugin":  "^5.0.4",
      "sass":  "^1.32.5",
      "sass-loader":  "^10.1.0",
      "style-loader":  "^2.0.0",
      "terser-webpack-plugin":  "^5.0.3",
      "webpack":  "^5.11.1",
      "webpack-cli":  "^4.3.0",
      "webpack-dev-server":  "^3.11.1",
      "webpack-merge":  "^5.7.3"
      }

这就是我启动开发服务器的方式：

    "start":  "webpack serve --config webpack.dev.js --open"

这些是我检查的以下 StackOverflow 问题，但对我没有帮助：

• Webpack dev server reloads but doesn't show Markup or CSS changes?
• webpack-dev-server not reloading on html or sass change
• webpack live hot reload for sass
• Multiple html files using webpack
• How can I use multiple entries in Webpack alongside multiple HTML files in HtmlWebpackPlugin?
• webpack-dev-server not updating bundle when saving file
• Why doesn't LiveReload work in Webpack when changing HTML if Hot Module Replacement is enabled?
• webpack-dev-server how to reload css without page refresh
• webpack-dev-server not reloading on html or sass change
• webpack live hot reload for sass

Answer 1

我现在已经找到问题了：

在我的 SCSS 文件中，我正在导入另一个样式表，但我打错了它。我写的不是Style，而是STyle。

有趣的是，它仍然认出了它。当我启动服务器时，它显示了正确的样式表，即我导入的样式表。当我改变一件事时，它也更新了它。只是在那之后，它没有更新任何东西。