为什么 html-webpack-inline-source-plugin 在编辑 CSS 个文件时可能会停止页面刷新？

Question

我正在使用此插件将所有 CSS 嵌入最终的 HTML 文件。

它会阻止应用程序在开发模式下刷新。如果我编辑 CSS，构建正常完成，但样式没有改变，网页也没有刷新。只有重启服务器才能看到更新后的 CSS.

有没有更好的方法将 CSS 嵌入到 HTML 文件中？我已经尝试使用 style-loader 来完成它，如下所示：。但是没有正常使用。

我的网络包：

const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');

const htmlWebpackPlugin = new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html",
    inlineSource: '.(js|css)$',
    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',
                }
            },
            {
                test: /\.css$/,
                use: [
                  MiniCssExtractPlugin.loader,
                  "css-loader"
                ]
            }
        ],
    },
    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',
          }),
        new MiniCssExtractPlugin({
            filename: "main.css",
            chunkFilename: "mainc.css"
        }),
        htmlWebpackPlugin,
        new HTMLInlineCSSWebpackPlugin(),
        new InlineChunkHtmlPlugin(HtmlWebPackPlugin, [/runtime~.+[.]tsx/]),
    ]
};

当我排除 new HTMLInlineCSSWebpackPlugin() 时， 刷新工作正常。

Answer 1

只需做一个小改动。将配置传递给过滤器的 HTMLInlineCSSWebpackPlugin() 构造函数。

new HTMLInlineCSSWebpackPlugin({
  filter: (filename) => false
})

如果您使用的是 Typescript，请尝试。

new HTMLInlineCSSWebpackPlugin({
  filter: (filename: string) => false
})

为什么 html-webpack-inline-source-plugin 在编辑 CSS 个文件时可能会停止页面刷新？

Why html-webpack-inline-source-plugin may stop the page refresh when CSS files are edited?

javascript

css

reactjs

webpack