I'm using this plugin to embed all CSS inside the final HTML file.

It stops the app from refreshing in dev mode. If I edit the CSS, the build finishes normally, but styles are not changed and the webpage is not refreshed. Only restarting the server helps to see the updated CSS.

Is there a better way to embed CSS inside the HTML file? I've tried doing it with style-loader as shown here: link. But it didn't work normally.

My webpack:

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/]),
    ]
};

When I exclude new HTMLInlineCSSWebpackPlugin(), refreshing works fine.

CodePudding user response：

Just do a small change. Pass configuration to HTMLInlineCSSWebpackPlugin() constructor for filter.

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

If you are using Typescript then try.

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