webpack 5 在样式更改时不支持 HMR（热重载）

Question

Webpack 停止对任何样式更改（CSS、scss）进行热重载。即使将样式导入 .ts/.js 文件似乎也没什么作用（它会重新加载页面，但样式仅适用于手动重新加载）。当我开始一个新项目时，我遇到了这个问题。与之前的配置类似的配置按预期工作。

这是我的 webpack.config

    const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const ESlintPlugin = require("eslint-webpack-plugin");

const port = 3000;

const devServer = (isDev) =>
  !isDev
    ? {}
    : {
        devServer: {
          open: true,
          hot: true,
          port: port,
          historyApiFallback: true,
        },
      };

const eslintPlugin = (isDev) =>
  isDev ? [] : [new ESlintPlugin({ extensions: ["ts", "js", "tsx", "jsx"] })];

module.exports = ({ development }) => ({
  mode: development ? "development" : "production",
  devtool: development ? "inline-source-map" : false,
  entry: {
    app: path.resolve(__dirname, "src/index.tsx"),
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: development ? `http://localhost:${port}/` : "",
    filename: "[name].[contenthash].js",
    assetModuleFilename: "assets/[hash][ext]",
  },
  module: {
    rules: [
      {
        test: /\.[tj]sx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(?:ico|gif|png|jpe?g|svg)$/i,
        type: "asset/resource",
      },
      {
        test: /\.s?[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
        sideEffects: true,
      },
    ],
  },
  plugins: [
    ...eslintPlugin(development),
    new HtmlWebpackPlugin({
      chunks: ["app"],
      title: "Platform",
      template: "src/index.html",
      favicon: "public/favicon.ico",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
    new CopyPlugin({
      patterns: [{ from: "./public" }],
    }),
    new CleanWebpackPlugin({
      cleanStaleWebpackAssets: false,
    }),
  ],
  resolve: {
    extensions: [".ts", ".js", ".tsx", ".jsx", ".sass", ".scss"],
    alias: {
      pages: path.resolve(__dirname, "src/pages/"),
      components: path.resolve(__dirname, "src/components/"),
      assets: path.resolve(__dirname, "src/assets/"),
      styles: path.resolve(__dirname, "src/styles/"),
      constants: path.resolve(__dirname, "src/constants/"),
      interfaces: path.resolve(__dirname, "src/interfaces/"),
      router: path.resolve(__dirname, "src/router/"),
      reducers: path.resolve(__dirname, "src/reducers/"),
      store: path.resolve(__dirname, "src/store/"),
      modules: path.resolve(__dirname, "src/modules/"),
      helpers: path.resolve(__dirname, "src/helpers/"),
      services: path.resolve(__dirname, "src/services/"),
    },
  },
  ...devServer(development),
});

Answer 1

您使用

hot:true

。这不够。这是 devServer 的设置，对我有用：

devServer: {
      port: 8080,
      hot: "only",
      static: {
        directory: path.join(__dirname, './'),
        serveIndex: true,
      },
    },

Answer 2

我在使用 Webpack 时遇到了同样的问题

v5.88.2

我使用

watchFiles

选项修复了它，如下所示：

devServer: {
  watchFiles: [
    'src/**/*.scss',
  ],
},

请注意

liveReload

选项部分中的此评论：

devServer.liveReload

boolean = true

默认情况下，开发服务器在检测到文件更改时将重新加载/刷新页面。必须禁用

devServer.hot

选项或必须启用

devServer.watchFiles

选项才能使

liveReload

生效。通过将其设置为

devServer.liveReload

来禁用

false

：

我还尝试添加

target: 'web'

或

hot: true

/

hot: 'only'

作为此报告和其他问题中的其他答案，但它不起作用。