Webpack-এ CSS বান্ডল 구성을 সেটআপ করা

পৃষ্ঠায় CSS যোগ করার শেখা পদ্ধতিটি খুব সফল নাও হতে পারে। প্রায়শই সমস্ত CSS ফাইল স্টাইল সহ একটি আলাদা বান্ডলে সংগ্রহ করা আরও সুবিধাজনক।

এর জন্য প্লাগইন প্রয়োজন mini-css-extract-plugin। চলুন এটি ইনস্টল করি:

terminalnpm install mini-css-extract-plugin --save-dev

এটি ইম্পোর্ট করি:

webpack.config.jsimport MiniCssExtractPlugin from 'mini-css-extract-plugin';

plugins কনফিগারেশনে যোগ করি:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [new MiniCssExtractPlugin()],
};

এখন style-loader-কে আমাদের প্লাগইনের লোডার দিয়ে প্রতিস্থাপন করি:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};