Vairāki CSS bundle Webpack

Ja vairāki ieejas punkti tiek apvienoti vienā failā, tad arī CSS bundle fails viņiem būs viens. Ja mēs savācam JavaScript vairākos bundle, tad katram no tiem tiks izveidots savs CSS fails.

Apskatīsim piemērā. Pieņemsim, ka mums ir viens ieejas punkts un uz to tiek importēti daži stilu faili:

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

Pieņemsim, ka uz otro ieejas punktu arī tiek importēti stili:

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

Uzrakstīsim iestatījumus:

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

Šādu iestatījumu rezultātā tiks salikti divi CSS bundle: test1.398db7afe3b52e94bb25.css un test2.1d12c304c284a752cb9a.css.