Nhiều gói tài nguyên kiểu dáng trong bố cục Webpack

Bây giờ giả sử chúng ta có nhiều điểm vào, được biên dịch thành các gói riêng của chúng. Giả sử mỗi điểm vào được kết nối với các tệp CSS của riêng nó. Như bạn đã biết, trong trường hợp này, mỗi điểm vào sẽ có gói CSS riêng. Webpack sẽ tự động kết nối từng gói này.

Hãy kiểm tra trong thực tế. Kết nối kiểu dáng vào điểm vào đầu tiên:

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

Kết nối kiểu dáng vào điểm vào thứ hai:

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

Thực hiện cấu hình:

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

Kết quả là tệp bố cục sẽ có dạng sau:

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

Tạo ba điểm vào. Kết nối ba tệp CSS với mỗi điểm vào. Thực hiện biên dịch. Đảm bảo rằng tất cả các gói được tự động kết nối.