Bundles Nyingi za CSS katika Webpack

Ikiwa sehemu nyingi za kuingizia data zinachanganyika kuwa faili moja, basi faili ya kusanyiko ya CSS itakuwa moja kwa ajili yao. Lakini ikiwa tunakusanya JavaScript katika bundles nyingi, basi kwa kila moja yao kutakuwa na faili yake ya CSS iliyokusanyika.

Wacha tuangalie kwa mfano. Tuchukulie tuna sehemu moja ya kuingizia data na faili za mitindo fulani zinakopwa ndani yake:

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

Tuchukulie kwa sehemu ya pili ya kuingizia data pia mitindo inakopwa ndani:

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

Wacha tuandike mipangilio:

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

Kama matokeo ya mipangilio kama hii, bundles mbili za CSS zitakusanywa: test1.398db7afe3b52e94bb25.css na test2.1d12c304c284a752cb9a.css.

Fanya sehemu tatu za kuingizia data. Unganisha kwa kila moja faili zake za CSS . Fanya kusanyiko na uhakiki ni nini kinachotokea kama matokeo.