كيفية ترتيب ملفات webpack المخرجة في مجلدات محددة

لم يعد يتم إستخدام file-loader بداية من الإصدار الخامس، وأصبح يتم إستخدام Asset Modules وهي عبارة عن مجموعة من المحملات loaders وهم كالتالي:

• asset/resource هي بديل لـ file-loader
• asset/inline بديل لـ url-loader
• asset/source بديل لـ raw-loader

ويتم إستخدامها على النحو التالي:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
 module: {
   
   rules: [
     {
       // تضمين الصور
       test: /\.png/,
       type: 'asset/resource'
     }
   ]
   
   
 },
};

سيتم إستخراج جميع ملفات .png إلى المجلد dist وسيتم حقن مساراتها في إلى الملفات المنتجة.

يمكنك الإطلاع على توثيق Asset Modules الرسمي في موقع webpack لمزيد من المعلومات عن كيفية إستخدامها.

هل أستخدم جميع المحملات التي ذكرتهم ؟

asset/resource هي بديل لـ file-loader

asset/inline بديل لـ url-loader

asset/source بديل لـ raw-loader

لترتيب الملفات المصدرية ؟ 

جربت استخدام asset/resource ولم يعطي تنيجة