webpack css loader排除css文件

Question

目前，我在一些react组件下有多个CSS文件。这些css文件是有条件的。但是，css加载器和提取文本插件包括js文件中不需要的所有css文件。有没有办法使用测试配置或其他方式通过正则表达式排除文件？

 test: /\.css$/,

让我说我有css文件

bear.css
cat.css
styles.css
colors.css
... multiptle different css files 

我正确编辑了正则表达式，但是无论我测试了什么，通过在css文件上留下一个注释（不应该包含在bundle.css中），它仍然包含所有css

这是我需要CSS文件的方式

const css = require(`./styles/${config}`)

---

我会回答自己。 Webpack的include exclude用于确定是否需要传输文件，这与从包中排除文件无关。例如，您添加正则表达式以排除，它仍将在您的捆绑包中。但是，将不会对其进行处理或转译（取决于您使用的装载程序）。因此，您应该使用类似ignore loader的方法从包中删除。

Answer 1

根据webpack documentation，您可以在style-loader文件中包含css-loader和webpack.config.js：

config = {
    entry: "./app/Main.js",
    output: {
        publicPath: "/",
        path: path.resolve(__dirname, "app"),
        filename: "bundled.js"
    },
    mode: "development",
    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
            loader: "babel-loader",
            options: {
                presets: ["@babel/preset-react", ["@babel/preset-env", { targets: { node: "12" } }]]
            }
            }
        },
        {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
        },
        ]
    }
}

之后，您可以直接在Main.js文件中添加CSS

import Example from 'Example'; 

import './css/bear.css';
import './css/cat.css';
...