Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks
У меня есть следующий пример конфигурации для использования плагина mini-css-extract-plugin с Webpack 4:
entry: {
a: ['./js/a.js', './scss/a.scss'],
b: ['./js/b.js', './scss/b.scss']
},
module: {
rules: [
[...],
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')
],
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
js: {
test: /\.js$/,
name: "commons",
chunks: "all",
minChunks: 7,
},
css: {
test: /\.(css|sass|scss)$/,
name: "commons",
chunks: "all",
minChunks: 2,
}
}
}
},
plugins: [
new MiniCssExtractPlugin({
filename: "dist/[name].css",
}),
]
И следующие файлы sass:
// a.scss
@import 'libA.scss';
@import 'libB.css';
[...]
// b.scss
@import 'libA.scss';
@import 'libB.css';
[...]
Когда я запускаю веб-пакет, libB.css вставляется в комплект commons.css, а libA.scss - нет.
Как правило, каждый импорт файла .css обрабатывается опцией splitChunks (только если в имени указано расширение css), а импорт sass - нет.
У меня есть проект с несколькими точками входа sass и множеством @import компонента sass, и я хотел бы создать общий пакет с общими модулями sass.
Я думаю, что mini-css-extract-plug не имеет вызова метода «extract». В документации загрузчик написан на том же массиве, что и в моем примере (MiniCssExtractPlugin.loader, затем css-loader и т. д.)
Я не уверен, что это аналогичная проблема, но этот пост мне очень помог - в основном просто использовал версию @next (остальная часть моей настройки была похожа на вашу) stackoverflow.com/questions/50803260/…
Ответы 1
Я делаю что-то подобное в своей конфигурации Webpack 4.
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module: {
rules: [ {
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: true,
sourceMap: true,
importLoader: 2
}
},
"sass-loader"
]}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "style.css",
chunkFilename: "[name].css"
]
Я также даю объект конфигурации output.publicPath, чтобы он указывал на мой каталог сборки, например ->
output: {
filename: "[name]-min.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/static/react/dist/"
},
edit If you are interested in code splitting, Webpack 4 can do this "out of the box" for you. This will split
.jsand as well.css-files for you in case you use dynamic imports.
optimization: {
splitChunks: {
chunks: 'all'
}
}
Если вы, с другой стороны, хотите объединить только ваш .css в один файл, вы можете добавить его следующим образом.
optimization: {
splitChunks: {
chunks: 'all'
cacheGroups: {
styles: {
name: 'styles',
test: /\.s?css$/,
chunks: 'all',
minChunks: 1,
reuseExistingChunk: true,
enforce: true,
},
}
},
}
С этой конфигурацией webpack объединит все css в один, но также сгенерирует styles.js, который необходим для того, чтобы все работало (все связанные js). Есть ли способ избавиться от этого файла?
Обрабатывает ли это @import 'md/variables', где ожидаемый разрешенный файл - ./md/_variables.scss?
Неправильная схема API. cacheGroups находится внутри splitChunks.
@ nass600 Используйте плагин webpack-fix-style-only-entries webpack, работает нормально.
importLoader должен быть importLoaders и, вероятно, должен быть 1, а не 2 в исходном примере конфигурации
@ElYobo, если вы НЕ хотите использовать SASS, 1 - правильное значение, 2 используется с SASS. Кажется, что ключ importLoaders задокументирован, но, похоже, работает в любом случае.
0 было бы без загрузчиков, 1 было бы sass ... предположительно, как с опечаткой importLoader, они также обрабатывают слишком много указанных загрузчиков? См. Документированный пример здесь, если есть путаница - github.com/webpack-contrib/css-loader#importloaders
Я никогда не работал с mini-css-extract-plugin, но я работал с ExtractTextPlugin для css, и одна вещь, которая может вам помочь, - это собрать загрузчики вместе для обработки вашего css. ExtractTextPlugin.extract (['css-loader', 'sass-loader']) Может быть идеей для решения вашей проблемы.