Бандлы стилей в макете в 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 файла. Сделайте так, чтобы они собирались в общий бандл. Проверьте, что этот бандл автоматически подключится к файлу макета.