Múltiples paquetes CSS en Webpack

Si múltiples puntos de entrada se fusionan en un archivo, entonces el archivo de paquete CSS será uno para ellos. Si estamos recolectando JavaScript en varios paquetes, entonces cada uno de ellos tendrá su propio archivo CSS recolectado.

Veamos un ejemplo. Supongamos que tenemos un punto de entrada y se importan a él algunos archivos de estilos:

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

Supongamos que al segundo punto de entrada también se importan estilos:

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

Escribamos la configuración:

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

Como resultado de tal configuración, se recolectarán dos paquetes CSS: test1.398db7afe3b52e94bb25.css y test2.1d12c304c284a752cb9a.css.