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

编程问答 2022-05-28

问题描述

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

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

我做了什么 Webpack 开发服务器
编辑script.js 实时更新站点
编辑archive-book.html 实时重新加载更新站点
编辑archive-book.html的样式表 实时重新加载不会更新站点
编辑post.html 实时重新加载更新站点
编辑post.html的样式表 实时重新加载更新站点
硬刷新浏览器 不使用新样式表更新站点

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

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,publicPath: "./",});

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

enter image description here

还有控制台。

enter image description here

这是我的依赖项


    "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 问题，但对我没有帮助：

解决方法

我现在已经发现问题了：

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

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

html-webpack-pluginwebpackwebpackwebpackwebpack-dev-server