Webpack-da bir nechta CSS bundle-lari

Agar bir nechta kirish nuqtalari bitta faylga birlashtirilsa, unda CSS yig'ish fayli ham ular uchun bitta bo'ladi. Agar biz JavaScriptni bir nechta bundle-larga yig'sak, unda ularning har biri uchun alohida CSS fayli yig'iladi.

Keling, buni misol bilan ko'rib chiqaylik. Faraz qilaylik, bizda bitta kirish nuqtasi bor va unga ba'zi stil fayllari import qilingan:

src/test1.jsimport './styles1-1.css';
import './styles1-2.css';

Faraz qilaylik, ikkinchi kirish nuqtasiga ham stil fayllari import qilingan:

src/test2.jsimport './styles2-1.css';
import './styles2-2.css';

Keling, sozlamalarni yozamiz:

webpack.config.jsexport 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'],
      },
    ],
  },
};

Bunday sozlamalar natijasida ikki ta CSS bundle'i yig'iladi: test1.398db7afe3b52e94bb25.css va test2.1d12c304c284a752cb9a.css.