Più bundle CSS in Webpack

Se più punti di ingresso vengono uniti in un unico file, allora anche il file CSS di build sarà uno solo per essi. Se invece compiliamo JavaScript in più bundle, allora per ognuno di essi verrà creato un proprio file CSS.

Diamo un'occhiata a un esempio. Supponiamo di avere un punto di ingresso e che in esso vengano importati alcuni file di stile:

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

Supponiamo che anche nel secondo punto di ingresso vengano importati degli stili:

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

Scriviamo le impostazioni:

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

Come risultato di queste impostazioni, verranno creati due bundle CSS: test1.398db7afe3b52e94bb25.css e test2.1d12c304c284a752cb9a.css.

Crea tre punti di ingresso. Collega a ciascuno i propri file CSS. Esegui la build e verifica cosa ottieni come risultato.