webpack css loader 排除 css 文件答案

【问题标题】：webpack css loader exclude css fileswebpack css loader 排除 css 文件
【发布时间】：2018-07-12 12:33:25
【问题描述】：

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

 test: /\.css$/,

假设我有 css 文件

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

我正确编辑了正则表达式，但它仍然包含所有 css，无论我通过在 css 文件上留下一条不应包含在 bundle.css 中的评论来测试什么

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

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

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

【问题讨论】：

require 不能有条件地使用。所有依赖项必须在编译之前知道，但有类似require.context
require 可以有条件使用但不能导入

标签： reactjs webpack css-loader

【解决方案1】：

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

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';
...

【讨论】：