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