Webpack:提取供应商区块中断动态导入（）

我希望能够在我的一个条目块（称为“vendor”）中导入CSS，并使用ExtractTextPlugin将其解压缩到一个“vendor.CSS”文件中

同时，我还希望能够在动态导入的块中导入任意CSS（使用ES6的

import（）

函数）

我不能让两个都工作：

{
        test: /\.css$/,
        // do not apply the ExtractTextPlugin in the app folder
        exclude: [helpers.root("app"), helpers.root("node_modules")],
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: {
                loader: "css-loader",
                options: {
                    minimize: CSSNANO_MINIMIZE_OPTIONS
                }
            }
        })
    },
    {
        test: /\.css$/,
        // only apply these to Components in the app folder
        include: [helpers.root("app"), helpers.root("node_modules/@swimlane/ngx-charts")],
        use: [
            "to-string-loader",
            {
                loader: "css-loader",
                options: {
                    importLoaders: 1, // 1 loader is applied before the css-loader
                    minimize: CSSNANO_MINIMIZE_OPTIONS
                }
            }
        ]
    },
    {
        test: /\.css$/,
        // only apply these to vendor files in the node_modules folder
        include: [helpers.root("node_modules")],
        exclude: [helpers.root("node_modules/@swimlane/ngx-charts")],
        loaders: ["style-loader", {
            loader: "css-loader",
            options: {
                importLoaders: 1, // 1 loader is applied before the css-loader
                minimize: CSSNANO_MINIMIZE_OPTIONS
            }
        }]
    },
    {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [
                {
                    loader: "css-loader",
                    options: {
                        minimize: CSSNANO_MINIMIZE_OPTIONS
                    }
                },
                "sass-loader"
            ]
        })
    }
}

My vendor.ts（其中一个条目块）如下所示：

import "font-awesome/css/font-awesome.min.css";
import "vendor/bootstrap/bootstrap.scss";

在构建之后，vendor.css只包含bootstrap的css，而不包含font-awesome的css。如果我改为简化配置，将ExtractTextPlugin用于除Angular 4组件以外的所有组件，我将无法再在代码中动态导入供应商库：

{
        test: /\.css$/,
        exclude: [helpers.root("app")],
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: {
                loader: "css-loader",
                options: {
                    minimize: CSSNANO_MINIMIZE_OPTIONS
                }
            }
        })
    },
    {
        test: /\.css$/,
        include: [helpers.root("app"), helpers.root("node_modules/@swimlane/ngx-charts")],
        use: [
            "to-string-loader",
            {
                loader: "css-loader",
                options: {
                    importLoaders: 1, // 1 loader is applied before the css-loader
                    minimize: CSSNANO_MINIMIZE_OPTIONS
                }
            }
        ]
    },
    {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [
                {
                    loader: "css-loader",
                    options: {
                        minimize: CSSNANO_MINIMIZE_OPTIONS
                    }
                },
                "sass-loader"
            ]
        })
    }
}

这种配置类似于

require("katex/dist/katex.css");
export default require("katex");

动态导入将不起作用，在浏览器中打开网站时会出现异常

我的配置有什么问题

谢谢

更新： 好的，显然这与ExtractTextPlugin中的一个bug有关：