تعتمد حزمة الويب على Node.js. Webpack عبارة عن أداة تغليف للوحدات الثابتة لتطبيقات JavaScript الحديثة، وقد تم تطويرها استنادًا إلى Node.js، وهي تتطلب دعم مكون Node.js عند استخدامها، ويجب تثبيتها باستخدام npm أو cnpm، والصيغة هي "cnpm install webpack -ز".
بيئة تشغيل هذا البرنامج التعليمي: نظام Windows 7، إصدار Nodejs 16، كمبيوتر DELL G3.
Webpack عبارة عن أداة لتجميع التعليمات البرمجية مع مدخل وخروج ومحمل ومكونات إضافية. webpack عبارة عن أداة تجميع وحدات ثابتة لتطبيقات JavaScript الحديثة. سيتم إجراء تحليل ثابت بناءً على تبعيات الوحدة، ثم إنشاء موارد ثابتة مقابلة لهذه الوحدات وفقًا لقواعد محددة.
عندما تقوم حزمة الويب بمعالجة تطبيق ما، فإنها تقوم داخليًا ببناء رسم بياني للتبعية يعين كل وحدة يتطلبها المشروع ويقوم بإنشاء حزمة واحدة أو أكثر.
Webpack هي أداة تعبئة أمامية تم تطويرها استنادًا إلى Node.js وتتطلب دعم مكون Node.js عند استخدامها.
تثبيت Webpack
① يعتمد تشغيل Webpack على Node.js، لذا يجب تثبيت Node.js أولاً.
بعد اكتمال التثبيت، أدخل سطري الأوامر التاليين في نافذة سطر الأوامر. إذا ظهر رقم الإصدار، فهذا يعني أن التثبيت ناجح.
$ عقدة -v$ npm -v
② ثم يمكنك تثبيت Webpack من خلال npm (أداة إدارة الحزم القائمة على Node.js).
نظرًا لأن مصدر npm في الخارج، فقد تكون سرعة التثبيت بطيئة. يوصى باستخدام مرآة npm cnpm الخاصة بـ Taobao. ولكن هناك شيء واحد يجب ملاحظته وهو أن بعض الحزم في cnpm ستكون مختلفة (بشكل عام، لا يؤثر ذلك على الاستخدام).
يمكنك إكمال تكوين cnpm من خلال السطر التالي من الكود
$ npm install -g cnpm --registry=https. //registry .npm.taobao.org
استخدم cnpm لتثبيت webpack:
cnpm install webpack -g
إنشاء مشروع
بعد ذلك نقوم بإنشاء تطبيق دليل:
تطبيق mkdir
أضف ملف runoob1.js في دليل التطبيق، الكود كما يلي:
app/runoob1.js file
document.write ("إنه يعمل.")؛ أضف ملف Index.html إلى دليل التطبيق، الكود كما يلي:
ملف app/index.html
<html>
<الرأس>
<ميتا محارف = "utf-8">
</الرأس>
<الجسم>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</الجسم>
</html> بعد ذلك نستخدم أمر webpack للحزمة:
webpack runoob1.js Bundle.js
سيؤدي تنفيذ الأمر أعلاه إلى تجميع ملف runoob1.js وإنشاء ملف Bundle.js بعد النجاح، تكون معلومات الإخراج كما يلي:
Hash : a41c6217554e666594cb
الإصدار: حزمة الويب 1.12.13
الوقت: 50 مللي ثانية
أسماء القطع بحجم الأصول
Bundle.js 1.42 كيلو بايت 0 [منبعثة] main
[0] ./runoob1.js 29 بايت {0} [مُصمم] افتح ملف Index.html في المتصفح، وتكون نتائج الإخراج كما يلي:
