• 0

file-loader تقوم بإنشاء صورتين من نفس الصورة وربط الصورة التي تعمل

يقوم برنامج تحميل الملفات بإنشاء صورتين منفصلتين في مجلد الإنشاء الخاص بي. أحدهما هو الاسم الصحيح ويتم حفظه في المسار الصحيح ، والآخر  يتم تخزينه في الإنشاء وليس البناء و هو 0 بايت هذا هو الملف الذي يتم ربطه في ملف index.html النهائي في مجلد البناء. لقد حددت كلاً من outputPath و publicPath. يبدو أن publicPath لا تفعل أي شيء في الواقع ، بغض النظر عما أضعه هناك. هل أنا أسيء فهم ما يفعله؟

module.exports = {
    entry: {
        index: './app/main.js',
        vendor: './app/vendor.js'
    },
    output: {
        path: path.resolve(__dirname, './build'),
        filename: '[name].[contenthash].js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/, /api/, /tests/, /coverage/],
                use: 'babel-loader'
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            },
            {
                test: /\.(svg|png|jpg|gif)$/,
                use:{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash].[ext]',
                        outputPath: 'images/',
                        publicPath: 'images/'
                    }
                }
            },
        ]        
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './app/index.html' }), 
        new CleanWebpackPlugin()
    ]
};
<img src="465107fe07e3ec18a463.png">

 

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

في إصدار webpack 5.0 يمكن التعامل مع أداة file-loader, url-loader, raw-loader بصورة طبيعية بدون تثبيتها. 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1
  • outputPath هي تدل على المسار الذي ستحفظ فيه الصور
  • publicPath تدل على المسار الذي يجب على المتصفح بجهة العميل الوصول للصور على الخادم عن طريقه

جرب حذف الخاصية publicPath بما انك تريد الوصول للصور من نفس المجلد

{
  test: /\.(svg|png|jpg|gif)$/,
  use: {
    loader: "file-loader",
    options: {
      name: "[name].[hash].[ext]",
      outputPath: "images/",
    },
  },
};

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن