Using extract plugin with IgnorePlugin leads to error

[throwable-one]

I am not completely sure if this is a bug or feature request, but it is not possible now to skip some imported module if extact css plugin is used.

It seems that this plugin uses css-loader explicitly, so user does not have any way to tell webpack "do not load module bar.css" and trying to do so with IgnorePlugin leads to exception.

The whole story is here: https://stackoverflow.com/questions/58295539/webpack-how-to-exclude-certain-css-file-from-output

[alexander-akait]

@throwable-one sorry, can't understand, why you use IgnorePlugin, what is use case? Also can you provide minimum reproducible test repo?

[throwable-one]

I want one of .css files to be removed from the bundle.

Here is project to reproduce. Run it. It will create main.css with content of bad_css.css.
Then, try to uncomment line 8 in webpack.config.js.
Build will fail.
untitled.zip

The problem is that extract plugin uses css-loader explicitly.

[alexander-akait]

@throwable-one use null-loader for this case

[throwable-one]

@evilebottnawi I am sorry, could you please give me example?
I've tried to use null-loader for bad_css.css but it doesn't work.

[alexander-akait]

@throwable-one sorry i don't have time on this, you can experiment with this

[throwable-one]

null-loader can't help here because any loader is ignored. Accroding to error:

ERROR in ./src/foo.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: Cannot find module '-!../node_modules/css-loader/dist/cjs.js!./bar.css'

css-loaded is used explicitly with all preloaders ignored

[alexander-akait]

@throwable-one you should exclude (exclude option) this module for css-loader and use test option with name for null-loader

[throwable-one]

Even disabling this module for css-loader excplicitly doesn't work

        rules: [
            {
                test: /good_css\.css$/,
                use: {loader: MiniCssExtractPlugin.loader}
            },
            {
                test: /bad_css\.css$/,
                use: {loader: 'null-loader'}
            },

            {
                test: /good_css\.css$/,
                exclude: /bad_css\.css$/,
                use: {loader: 'css-loader'}
            },
        ],

I still have bad_css.css content in my main.css.
And even without of extract plugin, bad_css included in main.js.

It seems that the only way completely remove this is IgnorePlugin, which is incompatible with extract plugin in this scenario unforrtunatelly

[alexander-akait]

I will look on this in near future

[throwable-one]

Thank you!
Here is workaround: use replacement to replace bad_css with empty.css

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

const pluginToIgnore = /bad_css\.css$/;
module.exports = {
    plugins: [
        new MiniCssExtractPlugin({}),
        new webpack.NormalModuleReplacementPlugin(
            pluginToIgnore,
            '!./empty.css'
        )
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
        ],
    },
};