Πολλαπλά CSS bundles στο Webpack

Εάν πολλά entry points συγχωνεύονται σε ένα αρχείο, τότε και το αρχείο CSS bundle θα είναι ένα για αυτά. Εάν όμως συλλέγουμε JavaScript σε πολλά bundles, τότε για καθένα από αυτά θα συλλεχθεί το δικό του CSS αρχείο.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε ένα entry point και σε αυτό γίνονται import μερικά αρχεία στυλ:

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

Ας υποθέσουμε ότι στο δεύτερο entry point γίνονται επίσης import στυλ:

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

Ας γράψουμε τις ρυθμίσεις:

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

Ως αποτέλεσμα τέτοιων ρυθμίσεων θα συλλεχθούν δύο CSS bundles: test1.398db7afe3b52e94bb25.css και test2.1d12c304c284a752cb9a.css.