Question

目前，我在一些反应组件下有多个css文件。这些css文件是有条件的。但是，css loader和extract text插件包含js文件中不需要的所有css文件。有没有办法用regex使用test config或其他方式排除文件？

 test: /\.css$/,

假设我有css文件

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

我正确地编辑了正则表达式，但是无论我通过在css文件上留下一个注释而不是我在bundle.css中包含哪个css

，它仍包含所有css

这就是我需要css文件的方式

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

我会自己回答。 Webpack包括用于确定文件是否需要转换的排除，这与从包中排除文件无关。例如，您添加要排除的正则表达式，它仍将在您的包中。但是，它不会被处理或转换（取决于您使用的装载机）。因此，您应该使用类似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';
...

webpack css loader排除css文件

1 个答案: