Beberapa Bundle Gaya dalam Tata Letak di Webpack

Sekarang mari kita asumsikan kita memiliki beberapa entry point, yang dikumpulkan menjadi bundle mereka sendiri. Mari untuk setiap entry point akan terhubung file CSS mereka sendiri. Seperti yang sudah Anda ketahui, dalam hal ini untuk setiap entry point akan ada bundle CSS sendiri. Webpack secara otomatis akan terhubung masing-masing bundle ini.

Mari kita uji dalam praktik. Mari hubungkan gaya ke entry point pertama:

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

Mari hubungkan gaya ke entry point kedua:

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

Mari lakukan konfigurasi:

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

Hasilnya, file tata letak akan memiliki tampilan berikut:

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

Buatlah tiga entry point. Ke setiap point hubungkan tiga file CSS. Lakukan build. Pastikan bahwa secara otomatis semua bundle terhubung.