Несколько бандлов стилей в макете в Webpack

Пусть теперь у нас есть несколько точек входа, которые собираются в свои бандлы. Пусть к каждой точке входа будут подключены свои CSS файлы. Как вы уже знаете, в этом случае для каждой точки входа будет свой CSS бандл. Webpack автоматически подключит каждый из этих бандлов.

Давайте проверим на практике. Подключим стили к первой точке входа:

import './styles1-1.css'; import './styles1-2.css';

Подключим стили ко второй точке входа:

import './styles2-1.css'; import './styles2-2.css';

Выполним настройку:

export 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' }), 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="test1.18e856b0da2f7862ab19.js"></script> <script defer src="test2.d12ade182c2989b4efa8.js"></script> <link href="test1.398db7afe3b52e94bb25.css" rel="stylesheet"> <link href="test2.1d12c304c284a752cb9a.css" rel="stylesheet"> </head> <body> </body> </html>

Сделайте три точки входа. К каждой точке подключите три CSS файла. Выполните сборку. Убедитесь, что автоматически подключаются все бандлы.