Vários pacotes CSS no Webpack

Se vários pontos de entrada forem mesclados em um único arquivo, então o arquivo CSS de build também será único para eles. No entanto, se estivermos agrupando JavaScript em vários pacotes, então cada um deles terá seu próprio arquivo CSS.

Vamos ver um exemplo. Suponha que temos um ponto de entrada e alguns arquivos de estilo são importados para ele:

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

Suponha que para o segundo ponto de entrada também sejam importados estilos:

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

Vamos escrever as configurações:

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

Como resultado dessa configuração, serão gerados dois pacotes CSS: test1.398db7afe3b52e94bb25.css e test2.1d12c304c284a752cb9a.css.

Crie três pontos de entrada. Conecte seus próprios arquivos CSS a cada um deles. Execute a build e verifique o que é obtido como resultado.