Бандлы стилей в макете в Webpack
Давайте теперь сделаем так, чтобы Webpack автоматически подключал CSS бандл к HTML макету сайта.
Пусть к точке входа импортируются два CSS файла:
import './styles1.css';
import './styles2.css';
Давайте настроим сборку этих файлов в один общий бандл. Для начала выполним все нужные импорты:
import path from 'path';
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import HtmlWebpackPlugin from 'html-webpack-plugin';
Теперь выполним настройки:
export default {
context: path.resolve( 'src'),
entry: './index.js',
output: {
filename: 'build.[contenthash].js',
path: path.resolve('dist'),
},
plugins: [
new MiniCssExtractPlugin({
filename: 'build.[contenthash].css'
}),
new HtmlWebpackPlugin(),
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
В результате после сборки у нас будет подключен бандл со скриптами и бандл со стилями:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<script defer src="build.4173b379c6d6ff439604.js"></script>
<link href="build.97299e5ee87c9c343a4c.css" rel="stylesheet">
</head>
<body>
</body>
</html>
Подключите к точке входа три CSS файла. Сделайте так, чтобы они собирались в общий бандл. Проверьте, что этот бандл автоматически подключится к файлу макета.