ওয়েবপ্যাক-এ লেআউটে একাধিক স্টাইল বান্ডল

এখন ধরুন আমাদের কাছে একাধিক এন্ট্রি পয়েন্ট আছে, যা তাদের নিজস্ব বান্ডলে সংগ্রহ করা হয়। ধরুন প্রতিটি এন্ট্রি পয়েন্টে তাদের নিজস্ব 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>