ওয়েবপ্যাকে লোডার

Webpack-এর ক্ষমতা প্রসারিত করার জন্যও লোডার ব্যবহার করা হয়। তারা একটি নির্দিষ্ট ধরনের ফাইল নিতে এবং তাদের উপর নির্দিষ্ট অপারেশন 수행 করতে দেয়।

উদাহরণস্বরূপ, আপনি .less এক্সটেনশন সহ সমস্ত ফাইল নিতে পারেন, তাদের টেক্সট CSS-এ রূপান্তর করুন, তারপর ফলস্বরূপ CSS মিনিমাইজ করুন এবং একটি সাধারণ ফাইলে সংরক্ষণ করুন।

আসুন একটি উদাহরণ ব্যবহার করে লোডারের সাথে কাজ করার সাধারণ স্কিম দেখি দটি কাল্পনিক লোডারের।

আসুন প্রথম লোডারটি ইনস্টল করি:

terminalnpm install test-loader1 --save-dev

আসুন দ্বিতীয় লোডারটি ইনস্টল করি:

terminalnpm install test-loader2 --save-dev

লোডার ইনস্টল করার পর আমরা করতে পারি কনফিগারেশন ফাইলে সেগুলো ব্যবহার করুন (সেগুলো ইম্পোর্ট করার দরকার নেই)। সিনট্যাক্স দেখুন:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i, // ফাইলের ধরন
        use: ['test-loader1', 'test-loader2'], // লোডারগুলি
      },
    ],
  },
};

অ্যারের উপাদানগুলি একটি স্ট্রিংয়ে নয় লিখতে পারেন, একটি কলামে:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'test-loader1',
          'test-loader2'
        ],
      },
    ],
  },
};

বিভিন্ন ধরনের ফাইলের জন্য আপনি লিখতে পারেন বিভিন্ন নিয়ম:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.sass$/i,
        use: [
          'test-loader1',
          'test-loader2'
        ],
      },
      {
        test: /\.less$/i,
        use: [
          'test-loader3',
          'test-loader4'
        ],
      },
    ],
  },
};