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

Question

foo.js
foo.css
bar.css

foo.js 包括foo.css。
而foo.css 包括bar.css。

因此，我与bar.css 捆绑在一起。我想排除它。我也在使用MiniCssExtractPlugin，因为我需要分离 css 和 js 文件。

我已经尝试过的：

• IgnorePlugin。它会删除 bar，但随后 MiniCssExtractPlugin 会因此而失败。
• null-loader for bar.css（我尝试了 test 与正则表达式和包含/排除）。它根本不起作用（可能是我错过了什么。
• /\.css$/ 的两个 oneOf 规则：用于 null-loader，另一个用于其他所有内容。

没有任何作用。

实现它的正确方法是什么？

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

还有输出

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'

似乎MiniCssExtractPlugin 明确使用css-loader，所以我不能跳过配置加载模块。

Answer 1

解决方法是使用NormalModuleReplacementPlugin将坏文件替换为空文件

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