Vairāki stilu bundle maketā Webpack

Pieņemsim, ka mums ir vairākas ieejas punkti, kas tiek apkopoti savos bundle. Pieņemsim, ka katram ieejas punktam tiks pievienoti savi CSS faili. Kā jūs jau zināt, šajā gadījumā katram ieejas punktam būs savs CSS bundle. Webpack automātiski pievienos katru no šiem bundle.

Pārbaudīsim praksē. Pievienosim stilus pirmajam ieejas punktam:

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

Pievienosim stilus otrajam ieejas punktam:

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

Veiksim iestatīšanu:

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'],
			},
		],
	},
};

Rezultātā maketa fails būs šādā formā:

<!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>

Izveidojiet trīs ieejas punktus. Katram punktam pievienojiet trīs CSS failus. Veiciet apkopi. Pārliecinieties, ka automātiski tiek pievienoti visi bundle.