اذهب إلى المحتوى
  • 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">

 

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

Recommended Posts

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

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

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

 

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...