Mehrere Style-Bundles in einem Layout in Webpack

Nehmen wir nun an, wir haben mehrere Einstiegspunkte, die in ihre eigenen Bundles gepackt werden. Nehmen wir an, dass an jeden Einstiegspunkt seine eigenen CSS-Dateien angehängt sind. Wie Sie bereits wissen, wird in diesem Fall für jeden Einstiegspunkt ein eigenes CSS-Bundle erstellt. Webpack wird jedes dieser Bundles automatisch verbinden.

Lassen Sie uns das praktisch überprüfen. Verbinden wir die Styles mit dem ersten Einstiegspunkt:

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

Verbinden wir die Styles mit dem zweiten Einstiegspunkt:

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

Führen wir die Konfiguration durch:

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 Ergebnis wird die Layout-Datei folgendermaßen aussehen:

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

Erstellen Sie drei Einstiegspunkte. Verbinden Sie mit jedem Punkt drei CSS-Dateien. Führen Sie den Build-Vorgang durch. Stellen Sie sicher, dass alle Bundles automatisch verbunden werden.