การมีหลายบันเดิลของสไตล์ในเลย์เอาต์ใน Webpack

สมมติว่าตอนนี้เรามีหลาย entry point ซึ่งจะถูก build เป็น bundle ของตัวเอง สมมติว่าแต่ละ entry point มีการเชื่อมต่อกับ ไฟล์ CSS ของตัวเอง อย่างที่คุณทราบอยู่แล้ว ในกรณีนี้แต่ละ entry point จะมี CSS bundle เป็นของตัวเอง Webpack จะทำการเชื่อมต่อ แต่ละ bundle เหล่านี้โดยอัตโนมัติ

มาลองทดสอบในทางปฏิบัติกัน เชื่อมต่อสไตล์กับ 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 point จำนวนสามจุด เชื่อมต่อไฟล์ CSS สามไฟล์กับ แต่ละจุด ทำการ build ตรวจสอบให้แน่ใจว่าทุก bundle ถูกเชื่อมต่อโดยอัตโนมัติ