Beberapa Bundle CSS di Webpack

Jika beberapa titik entri digabungkan menjadi satu file, maka file build CSS juga akan menjadi satu untuk mereka. Namun, jika kita mengumpulkan JavaScript menjadi beberapa bundle, maka setiap bundle akan memiliki file CSS sendiri yang dikumpulkan.

Mari kita lihat sebuah contoh. Misalkan kita memiliki satu titik entri dan beberapa file gaya diimpor ke dalamnya:

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

Misalkan ke titik entri kedua juga diimpor beberapa gaya:

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

Mari kita tulis pengaturannya:

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 dari pengaturan tersebut adalah dua bundle CSS akan dikumpulkan: test1.398db7afe3b52e94bb25.css dan test2.1d12c304c284a752cb9a.css.

Buatlah tiga titik entri. Hubungkan file CSS masing-masing ke setiap entri. Lakukan build dan periksa hasil yang didapat.