استخدم المكون الإضافي HTML-Webpack-Plugin لبدء الصفحة لوضع صفحة HTML في الذاكرة لتحسين سرعة التحميل للصفحة
يمكنه أيضًا تعيين المسار الذي تم تقديمه بواسطة ملف JS تلقائيًا في صفحة index.html
المتطلبات الأساسية للاستخدام: تم تثبيت WebPack في المشروع:
الخطوة 1 : أدخلcnpm i html-webpack-plugin -D قم بتثبيت المكون الإضافي HTML-Webpack-Plugin إلى تبعية التطويرتتمثل وظيفتها في إنشاء صفحات HTML المقابلة في الذاكرة بناءً على صفحة القالب المحددة.
الخطوة 2 : تعديل ملف التكوين لـ webpack.config.js بعد تثبيت المكون الإضافياستيراد المكون الإضافي HTML-Webpack-Plugin في ملف التكوين وتكوين مسار صفحة القالب واسم الصفحة الذي تم إنشاؤه
const path = require (path) // import html-webpack-pluginconst htmlwebpackplugin = require (html-webpack-plugin) module.exports = {intrad: path.join (__ dirname ،. } ، // تكوين المكونات الإضافية: [// إنشاء html-webpack-plugin plugin new htmlwewbackplugin ({// set template parameter template: path.join (__ dirname ،./src/index.html) ، // حدد الصفحة لتوليد صفحات التوليد في الذاكرة وفقًا للصفحة المحددة. صفحات تم إنشاؤها في الذاكرة})]}بعد استخدام المكون الإضافي HTML-Webpack-Plugin ، ليست هناك حاجة لمعالجة المسار المرجعي لـ backdle.js يدويًا
نظرًا لأنه تم إدخال المسار الصحيح إلى backdle.js تلقائيًا في صفحة HTML التي تم إنشاؤها في الذاكرة
ملخص - ماذا يفعل البرنامج المساعد:1. قم بإنشاء صفحة في الذاكرة تلقائيًا بناءً على الصفحة المحددة.
2. إدخال backdle.js المعبأة تلقائيًا في الصفحة
هذه هي نهاية هذه المقالة حول تحليل موجز للبرنامج التعليمي حول استخدام المكون الإضافي لـ HTML WebPack. لمزيد من محتوى HTML WebPack Plugin ، يرجى البحث عن المقالات السابقة من Wulin.com أو متابعة تصفح المقالات ذات الصلة أدناه. آمل أن يدعم الجميع wulin.com في المستقبل!