Mai multe bundle-uri CSS în Webpack

Dacă mai multe puncte de intrare sunt unite într-un singur fișier, atunci și fișierul de bundle CSS va fi unul singur pentru ele. Dacă, însă, colectăm JavaScript în mai multe bundle-uri, atunci pentru fiecare dintre ele va fi creat propriul fișier CSS.

Să ne uităm la un exemplu. Să presupunem că avem un punct de intrare și către acesta sunt importate unele fișiere de stil:

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

Să presupunem că și către al doilea punct de intrare sunt importate stiluri:

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

Să scriem setările:

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

Ca rezultat al acestor setări, vor fi create două bundle-uri CSS: test1.398db7afe3b52e94bb25.css și test2.1d12c304c284a752cb9a.css.