لم يعد يتم إستخدام 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 لمزيد من المعلومات عن كيفية إستخدامها.