• 0

جعل webpack يتعرف على جميع ملفات javaScript

السلام عليكم

لدية مشروع به عدة صفحات و اريد ربط كل صفحة ب ملف javaScript منفصل لكن المشكلة هي ان webpack يقوم ب انشاء الملف الاصل فقط و هو index.js و لا ينشئ بقية ملفات javaScript في المجلد dist

كيف جعل webpack يقوم ب انشاء او استدعاء جميع ملفات javaScript المنفصلة من مجلد المشروع الاصلي src

1 شخص أعجب بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 20 دقائق مضت قال HA_shafeai:

لم تنجح هذه الطريقة يظهر لي الخطأ

 Error: Conflict: Multiple chunks emit assets to the same filename main.js (chunks main and about)

يبدوا أنك تقوم بإخراج الملفات إلى ملف واحد . بالطبع ستحتاج تعديل المخرج أيضا , سنحتاج إخراج الملفات منفصلة بحسب إسم الملف . 

فعوضا عن مثل هذا : 

output:{
        path:path.join(__dirname,"/dist"),
        filename:"main.js"
},

نحتاج إخراج الملفات على هذا النحو : 

output:{
        path:path.join(__dirname,"/dist"),
        filename:"[name].js"
},

حتى لا يحدث خطأ التعارض الذي ظهر معك , ثم يمكنك بعد ذلك تشغيل أمر البناء بشكل طبيعي : 

npm run build

 

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

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


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

تأكد أنك تقوم بإعداد webpack ليقوم بعمل المطلوب على نحو صحيح , ففي الأرجح يتم بناء الملف الأصلي index.js لأنك تقوم بهذا في ملف webpack.config.js : 

entry: { main: path.resolve(__dirname, './src/index.js'), },

ثم تقوم بتضمينه في ملف الـ html : 

<script type="text/html" src="{required('index.js')}"></script>

في حين أنك تحتاج تمرير عدة نقاط وصول لكائن المدخلات entry : 

entry: { 
    main: path.resolve(__dirname, './src/scripts/index.js'), 
    about: path.resolve(__dirname, './src/scripts/about.js'), 
    contact: path.resolve(__dirname, './src/scripts/contact.js'), 
},

ثم يمكنك تضمين كل ملف على حدة في ملفات الـ html التي تقوم ببناءها .

يمكنك القراءة أكثر عن الخاصية entry في دليل Webpack الشامل .

1 شخص أعجب بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 47 دقائق مضت قال Adnane Kadri:

تأكد أنك تقوم بإعداد webpack ليقوم بعمل المطلوب على نحو صحيح , ففي الأرجح يتم بناء الملف الأصلي index.js لأنك تقوم بهذا في ملف webpack.config.js : 


entry: { main: path.resolve(__dirname, './src/index.js'), },
 

ثم تقوم بتضمينه في ملف الـ html : 


<script type="text/html" src="{required('index.js')}"></script>
 

في حين أنك تحتاج تمرير عدة نقاط وصول لكائن المدخلات entry : 


entry: { 
    main: path.resolve(__dirname, './src/scripts/index.js'), 
    about: path.resolve(__dirname, './src/scripts/about.js'), 
    contact: path.resolve(__dirname, './src/scripts/contact.js'), 
},
 

ثم يمكنك تضمين كل ملف على حدة في ملفات الـ html التي تقوم ببناءها .

يمكنك القراءة أكثر عن الخاصية entry في دليل Webpack الشامل .

لم تنجح هذه الطريقة يظهر لي الخطأ

 Error: Conflict: Multiple chunks emit assets to the same filename main.js (chunks main and about)

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


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

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

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

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


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

تسجيل الدخول

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


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