Настройка сборки CSS в бандл Webpack
Удобно собирать все CSS файлы в отдельный бандл со стилями. Для этого нужен плагин mini-css-extract-plugin:
npm install mini-css-extract-plugin --save-dev
Импортируем его:
webpack.config.jsimport MiniCssExtractPlugin from 'mini-css-extract-plugin';
Добавим в настройку:
webpack.config.jsexport default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
};
Подключим лоадер из нашего плагина, порядок их перечисления в массиве свойства use
важен, так как загрузчики используются от последнего к первому:
webpack.config.jsexport default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
Тестирование сборки CSS в бандл
Давайте потестируем сборку CSS в отдельный бандл. Пусть у нас есть два CSS файла:
/src/styles1.cssbody {
background: red;
}
/src/styles2.cssp {
color: green;
}
Импортируем их к точке входа:
/src/index.jsimport './styles1.css';
import './styles2.css';
Команда на сборку проекта соберет все в отдельный файл с именем main.css
:
/dist/main.cssbody {
background: red;
}
p {
color: green;
}
Имя файла CSS бандла
С помощью настройки filename
можно задать имя файла CSS бандла:
webpack.config.jsplugins: [new MiniCssExtractPlugin({
filename: 'build.css'
})]
Хеш CSS бандла
С помощью команды contenthash можно задать хеш в имени файла CSS бандла:
webpack.config.jsplugins: [new MiniCssExtractPlugin({
filename: 'build.[contenthash].css'
})]
Несколько CSS бандлов
Если несколько точек входа сливаются в один файл, то и файл сборки CSS будет для них один. Если же мы собираем JavaScript в несколько бандлов, то для каждого из них будет собран свой CSS файл.
Давайте посмотрим на примере, пусть у нас есть одна точка входа и к ней импортируются некоторые файлы стилей:
/src/test1.jsimport './styles1-1.css';
import './styles1-2.css';
/src/test2.jsimport './styles2-1.css';
import './styles2-2.css';
Давайте напишем настройки:
webpack.config.jsexport default {
context: path.resolve("src"),
entry: {
test1: "./test1.js",
test2: "./test2.js",
},
output: {
filename: "[name].[contenthash].js",
path: path.resolve("dist"),
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
В результате таких настроек будет собрано два CSS бандла:
- test1.398db7afe3b52e94bb25.css
- test2.1d12c304c284a752cb9a.css