Meerdere CSS bundels in Webpack

Als meerdere entry points samengevoegd worden tot één bestand, dan zal het CSS bundelbestand voor hen ook één zijn. Als we JavaScript echter in meerdere bundels verzamelen, dan zal voor elk van hen een eigen CSS bestand worden gegenereerd.

Laten we een voorbeeld bekijken. Stel we hebben één entry point en daarin worden enkele stijlbestanden geïmporteerd:

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

Stel dat naar het tweede entry point ook stijlen worden geïmporteerd:

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

Laten we de instellingen schrijven:

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

Als resultaat van dergelijke instellingen zullen er twee CSS bundels worden gegenereerd: test1.398db7afe3b52e94bb25.css en test2.1d12c304c284a752cb9a.css.