Неколку бандлови на стилови во макетот во 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 датотеки. Извршете собирање. Проверете дали автоматски се поврзани сите бандлови.