Πολλαπλά bundles στυλ στο layout στο Webpack

Ας υποθέσουμε τώρα ότι έχουμε πολλά entry points που συλλέγονται στα δικά τους bundles. Ας υποθέσουμε ότι σε κάθε entry point θα συνδεθούν τα δικά του CSS αρχεία. Όπως ήδη γνωρίζετε, σε αυτήν την περίπτωση για κάθε entry point θα υπάρχει το δικό του CSS bundle. Το Webpack θα συνδέσει αυτόματα καθένα από αυτά τα bundles.

Ας δοκιμάσουμε στην πράξη. Ας συνδέσουμε τα στυλ στο πρώτο entry point:

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

Ας συνδέσουμε τα στυλ στο δεύτερο entry point:

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

Ως αποτέλεσμα, το αρχείο layout θα έχει την ακόλουθη μορφή:

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

Δημιουργήστε τρία entry points. Σε κάθε entry point συνδέστε τρία CSS αρχεία. Εκτελέστε τη build. Βεβαιωθείτε ότι αυτόματα συνδέονται όλα τα bundles.