Неколку CSS бандлови во Webpack

Ако неколку влезни точки се спојуваат во една датотека, тогаш и датотеката за собиран CSS ќе биде една за нив. Ако пак го собиrame JavaScript во неколку бандлови, тогаш за секој од нив ќе биде собран свој CSS датотека.

Ајде да погледнеме на пример. Нека имаме една влезна точка и кон неа се импортираат некои датотеки со стилови:

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

Нека кон втората влезна точка исто така се импортираат стилови:

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

Ајде да ги напишеме поставките:

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

Како резултат на ваквите поставки ќе се соберат два CSS бандла: test1.398db7afe3b52e94bb25.css и test2.1d12c304c284a752cb9a.css.

Направете три влезни точки. Поврзете кон секоја свои CSS датотеки. Извршете собирање и проверете, што ќе се добие како резултат.