如何从 Webpack 中的 output 中排除某些.CSS 文件：？

Question

foo.js
foo.css
bar.css

foo.js includes foo.css .
And foo.css includes bar.css .

As result, I have bundle with bar.css . I want to exclude it. I am also using MiniCssExtractPlugin since I nee to separate css and js files.

What I already tried:

• IgnorePlugin . It removes bar , but then MiniCssExtractPlugin fails because of it.
• null-loader for bar.css ( I tried both test with regexp and include/exclude). It simply doesn't work (it could be that I miss something.
• Two oneOf rules for /\.css$/ : for with null-loader and another with everything else.

Nothing works.

What is the correct way to achieve it?

My webpack.config.js

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

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({ }),
    new webpack.IgnorePlugin(/bar\.css$/)
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
        ],
      },
    ],
  },
};

And the output

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'

It seems that MiniCssExtractPlugin uses css-loader explicitly, so I can't skip module loading with configuration.

Answer 1

Solution is to use NormalModuleReplacementPlugin to replace bad file with empty one

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