Nhiều Bundle CSS trong Webpack

Nếu nhiều điểm vào (entry point) được hợp nhất thành một tệp, thì tệp bundle CSS cũng sẽ chỉ có một. Nhưng nếu chúng ta build JavaScript thành nhiều bundle, thì mỗi bundle sẽ có một tệp CSS riêng được build.

Hãy xem một ví dụ. Giả sử chúng ta có một điểm vào và import một số tệp style vào đó:

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

Giả sử điểm vào thứ hai cũng import các style:

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

Hãy viết 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'
	})],
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
		],
	},
};

Kết quả của cấu hình này sẽ tạo ra hai bundle CSS: test1.398db7afe3b52e94bb25.css và test2.1d12c304c284a752cb9a.css.

Tạo ba điểm vào. Kết nối các tệp CSS riêng của chúng vào mỗi điểm. Thực hiện build và kiểm tra kết quả thu được.