Beberapa Bundle Gaya dalam Layout Webpack

Sekarang mari kita andaikan terdapat beberapa titik kemasukan, yang dikumpulkan kepada bundle mereka sendiri. Mari untuk setiap titik kemasukan disambungkan fail CSS mereka sendiri. Seperti yang anda sudah tahu, dalam kes ini, untuk setiap titik kemasukan akan ada bundle CSS tersendiri. Webpack secara automatik akan menyambungkan setiap bundle ini.

Mari kita uji secara praktikal. Sambungkan gaya ke titik kemasukan pertama:

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

Sambungkan gaya ke titik kemasukan kedua:

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

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, fail layout akan mempunyai rupa 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>

Buat tiga titik kemasukan. Sambungkan tiga fail CSS kepada setiap titik. Lakukan pembungkusan. Pastikan semua bundle disambungkan secara automatik.