Beberapa Bundle CSS dalam Webpack

Jika beberapa titik kemasukan digabungkan menjadi satu fail, maka fail pembinaan CSS juga akan menjadi satu untuk mereka. Namun, jika kita membina JavaScript kepada beberapa bundle, maka setiap satunya akan mempunyai fail CSS sendiri yang dibina.

Mari kita lihat contoh. Katakan kita mempunyai satu titik kemasukan dan beberapa fail gaya diimport kepadanya:

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

Katakan untuk titik kemasukan kedua gaya juga diimport:

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

Mari kita tulis konfigurasinya:

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

Hasil daripada konfigurasi sedemikian, dua bundle CSS akan dibina: test1.398db7afe3b52e94bb25.css dan test2.1d12c304c284a752cb9a.css.

Buat tiga titik kemasukan. Sambungkan fail CSS anda sendiri kepada setiap satu. Lakukan pembinaan dan periksa apa hasilnya.