Webpack-এ অ্যাসেট
প্রতিটি প্রকল্পে কিছু রিসোর্স বা অ্যাসেট (assets) থাকে। এই অ্যাসেটগুলি হলো ছবি, ফন্ট ফাইল এবং এজাতীয় জিনিস।
সাধারণত, আমরা শুধুমাত্র প্রকল্পের ফোল্ডার থেকে রিসোর্সগুলি বিল্ড ফোল্ডারে স্থানান্তর করতে চাই। কিন্তু আবার ক্যাশের সমস্যা দেখা দেয়। উদাহরণস্বরূপ, ব্রাউজার ছবিগুলি ক্যাশে করে। এর মানে হল যে如果我们 যদি ফাইলের নাম পরিবর্তন না করে ইমেজ পরিবর্তন করি, তাহলে সাইটের ব্যবহারকারীরা পূর্ববর্তী সংস্করণের ছবি দেখতে পাবেন, কারণ সেটি তাদের কাছে ক্যাশে হয়ে গেছে।
সমস্যার সমাধান, যেমন আপনি ইতিমধ্যে জানেন, হল ফাইলের নামে হ্যাশ যোগ করা। Webpack রিসোর্স ফাইলগুলি কপি করতে দেয় বিল্ড ফোল্ডারে, তাদের সাথে হ্যাশ যোগ করে এবং, সবচেয়ে গুরুত্বপূর্ণ, সব ফাইলে এই রিসোর্সের পথ পরিবর্তন করে নতুনগুলিতে।
Webpack-এ অ্যাসেট নিয়ে কাজ করা হয়
বিশেষ অ্যাসেট মডিউল ব্যবহার করে।
এগুলোর চারটি প্রকার: asset/resource,
asset/inline, asset/source,
asset।
asset/resource মডিউল ফাইলগুলি কপি করে
প্রকল্প ফোল্ডার থেকে বিল্ড ফোল্ডারে এবং প্রতিস্থাপন করে
সেগুলির পথ নতুন করে।
asset/inline মডিউল ফাইলগুলি নেয়
প্রকল্প ফোল্ডার থেকে এবং বিল্ড কোডে
ফাইলের পথগুলিকে base64 দিয়ে প্রতিস্থাপন করে।
asset/source মডিউল ফাইলগুলি নেয়
প্রকল্প ফোল্ডার থেকে এবং সেগুলি রিটার্ন করে
টেক্সট স্ট্রিং আকারে।
asset মডিউল নিজে বেছে নেয়, কপি করতে হবে
ফাইল বিল্ড ফোল্ডারে নাকি তাকে base64-তে রূপান্তর করতে হবে।
পছন্দ করা হয় ফাইলের আকারের উপর নির্ভর করে।
ডিফল্টভাবে, 8kb-এর বেশি ফাইল
ফাইল হিসাবে বিল্ড হয়।
এই মডিউলগুলি প্রয়োগের সাধারণ স্কিম নিম্নরূপ:
module: {
rules: [
{
test: /\.png$/, // ফাইল
type: 'asset/resource' // মডিউলের ধরন
}
]
},
অ্যাসেট বলতে কী বোঝায় তা বলুন।
গুগল করে দেখুন base64 কী এবং CSS-তে এটি কীভাবে ব্যবহার করা হয়।
অ্যাসেটের জন্য 4 ধরনের মডিউলের তালিকা করুন।
বর্ণনা করুন, 4 ধরনের মডিউলগুলির মধ্যে
প্রতিটির উদ্দেশ্য কী।
