Multiple CSS Bundles in Webpack

If several entry points are merged into one file, then the CSS assembly file will be one for them. If we collect JavaScript into several bundles, then each of them will have its own CSS file.

Let's look at an example. Let's say we have one entry point and some style files are imported to it:

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

Let the styles also be imported to the second entry point:

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

Let's write the settings:

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

As a result of such settings, two CSS bundles will be collected: test1.398db7afe3b52e94bb25.css and test2.1d12c304c284a752cb9a.css.

Make three entry points. Connect your CSS files to each. Build and check the result.