वेबपैक में लेआउट में स्टाइल्स के कई बंडल

अब मान लीजिए कि हमारे पास कई एंट्री पॉइंट हैं जो अपने बंडल में बनते हैं। मान लीजिए कि प्रत्येक एंट्री पॉइंट से उसकी अपनी CSS फाइलें जुड़ी होंगी। जैसा कि आप पहले से जानते हैं, इस मामले में, प्रत्येक एंट्री पॉइंट का अपना CSS बंडल होगा। वेबपैक स्वचालित रूप से इनमें से प्रत्येक बंडल को जोड़ देगा।

आइए व्यवहार में जांच करें। पहले एंट्री पॉइंट से स्टाइल्स जोड़ते हैं:

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

दूसरे एंट्री पॉइंट से स्टाइल्स जोड़ते हैं:

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

नतीजतन, लेआउट फाइल इस तरह दिखेगी:

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>