Webpack-də Layoutda Bir Neçə CSS Bundle

Fərz edək ki, indi bizim bir neçə giriş nöqtəmiz var və onlar öz bundle-larında yığılır. Hər bir giriş nöqtəsinin öz CSS faylları əlaqələndirilsin. Artıq bildiyiniz kimi, bu halda hər bir giriş nöqtəsi üçün ayrı bir CSS bundle olacaq. Webpack avtomatik olaraq hər bir bu bundle-ı əlaqələndirəcək.

Gəlin praktikada yoxlayaq. Birinci giriş nöqtəsinə stil əlaqələndirək:

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

İkinci giriş nöqtəsinə stil əlaqələndirək:

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

Konfiqurasiyanı yerinə yetirək:

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'
    }),
    new HtmlWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

Nəticədə layout faylı aşağıdakı formada olacaq:

dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <script defer src="test1.18e856b0da2f7862ab19.js"></script>
    <script defer src="test2.d12ade182c2989b4efa8.js"></script>
    <link href="test1.398db7afe3b52e94bb25.css" rel="stylesheet">
    <link href="test2.1d12c304c284a752cb9a.css" rel="stylesheet">
  </head>
  <body>
    
  </body>
</html>