Webpack: извлечение фрагментов вендора динамический импорт ()

Я хотел бы иметь возможность импортировать CSS в один из моих блоков ввода (называемых "vendor") и извлекать его с помощью 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"
            ]
        })
    }
}

Мой vendor.ts (один из входных блоков) выглядит следующим образом:

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

После сборки vendor.css содержит только CSS начальной загрузки, но не font-awesome. Если я вместо этого упросту свою конфигурацию, чтобы использовать 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: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/456

0 ответов

Другие вопросы по тегам