Question

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

当我编辑我的 SCSS 文件并保存时，webpack 会编译，但不会重新加载。
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 问题，但对我没有帮助：

Answer 1

我现在已经发现问题了：

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

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

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

1 个答案: