Meerdere style bundels in een lay-out in Webpack

Stel dat we nu meerdere invoerpunten hebben die worden verzameld in hun eigen bundels. Stel dat bij elk invoerpunt eigen CSS-bestanden zijn aangesloten. Zoals je al weet, in dit geval zal voor elk invoerpunt er een eigen CSS bundel zijn. Webpack sluit automatisch elk van deze bundels aan.

Laten we het in de praktijk testen. Laten we stijlen aansluiten op het eerste invoerpunt:

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

Laten we stijlen aansluiten op het tweede invoerpunt:

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

Laten we de configuratie uitvoeren:

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

Als resultaat zal het lay-outbestand de volgende vorm hebben:

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

Maak drie invoerpunten. Sluit bij elk punt drie CSS-bestanden aan. Voer de bundeling uit. Zorg ervoor dat automatisch alle bundels worden aangesloten.