为何HTMLInlineCSSWebpackPlugin会导致开发模式下编辑CSS后页面无法自动刷新？及CSS内嵌HTML替代方案咨询

我帮你分析下这个问题：你遇到的是开发模式下HTMLInlineCSSWebpackPlugin与Webpack热模块替换(HMR)不兼容的典型场景——这个插件的工作逻辑是把提取后的静态CSS文件嵌入HTML，但开发环境的热更新需要依赖style-loader这类能动态注入样式、监听变化并局部更新的loader，两者的工作流程完全冲突，所以移除插件后热刷新就正常了。

下面是具体的解决方案，兼顾开发效率和生产环境的需求：

1. 拆分开发/生产环境的Webpack配置 #

核心思路是：开发环境用style-loader实现热更新，生产环境再用CSS内嵌HTML的方案。我们把配置拆成3个文件，维护起来更清晰：

通用基础配置（webpack.common.js） #

保留所有环境共用的配置，去掉CSS相关的loader和生产专属插件：

const webpack = require('webpack');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CircularDependencyPlugin = require('circular-dependency-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');

const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html",
  inject: 'body',
});

module.exports = {
  entry: ['./src/index.tsx', './src/main.css'],
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    fallback: {
      "path": require.resolve("path-browserify"),
      "os": require.resolve("os-browserify/browser"),
      "url": require.resolve("url"),
      "tty": require.resolve("tty-browserify"),
      "minimatch": require.resolve("minimatch"),
      "process": require.resolve("process")
    },
  },
  module: {
    rules: [{
        test: /\.tsx?$/,
        exclude: /node_modules|dist|\.js$|\.d\.ts$/,
        loader: 'ts-loader',
        options: {
          configFile: 'tsconfig.json',
        }
      }
    ],
  },
  output: {
    filename: 'bundle.js',
    publicPath: '',
  },
  plugins: [
    new CircularDependencyPlugin({
      exclude: /a\.js|node_modules/,
      include: /src/,
      failOnError: true,
      allowAsyncCycles: false,
      cwd: process.cwd(),
    }),
    new webpack.ProvidePlugin({
      process: 'process',
    }),
    htmlWebpackPlugin,
    new InlineChunkHtmlPlugin(HtmlWebPackPlugin, [/runtime~.+[.]tsx/]),
  ]
};

开发环境配置（webpack.dev.js） #

合并通用配置，启用热更新，用style-loader处理CSS：

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    hot: true, // 开启热模块替换
    open: true,
    static: './dist'
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        'style-loader', // 动态把CSS注入DOM，支持热更新
        "css-loader"
      ]
    }]
  },
});

生产环境配置（webpack.prod.js） #

合并通用配置，用MiniCssExtractPlugin提取CSS后再内嵌到HTML：

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        "css-loader"
      ]
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "main.css",
      chunkFilename: "mainc.css"
    }),
    new HTMLInlineCSSWebpackPlugin(),
  ],
});

最后更新package.json的脚本命令，方便切换环境：

"scripts": {
  "start": "webpack serve --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js"
}

2. 为什么之前用style-loader没成功？ #

你之前的配置里同时启用了MiniCssExtractPlugin.loader和style-loader，这俩是互斥的——MiniCssExtractPlugin负责把CSS提取成独立文件，而style-loader是把CSS直接注入到页面DOM中，同时使用会导致样式加载逻辑混乱，自然无法正常工作。开发环境必须完全移除MiniCssExtractPlugin相关配置，只保留style-loader + css-loader的组合。

3. 可选方案：开发环境强制内嵌CSS（不推荐） #

如果你非要在开发环境也实现CSS内嵌HTML，那只能放弃局部热更新，改成监听文件变化后刷新整个页面。可以在devServer中添加配置：

devServer: {
  hot: false,
  liveReload: true,
  watchFiles: ['./src/**/*.html', './src/**/*.css']
}

但这种体验远不如style-loader的局部热更新流畅，所以还是优先推荐第一种环境拆分的方案。

这样调整后，开发模式下修改CSS会立即局部更新页面样式，生产模式下CSS会内嵌到HTML中，完美解决你的问题。

内容的提问来源于stack exchange，提问作者Animus