close

Webpack دليل للمبتدئين

Webpack هي أداة مفيدة للغاية في تطوير الويب الحديث ، وتساعد في إدارة الموارد وتحسين المشاريع. فيما يلي دليل أساسي للوافدين الجدد حول كيفية الاستخدام Webpack:

ثَبَّتَ Webpack

أولاً ، قم بتثبيت Node.js إذا لم تكن قد قمت بذلك بالفعل. بعد ذلك ، قم بإنشاء دليل لمشروعك وافتح نافذة Terminal / Command Prompt في هذا الدليل. قم بتشغيل الأوامر التالية للتثبيت Webpack و webpack-cli(واجهة سطر أوامر Webpack):

npm install webpack webpack-cli --save-dev

تكوين Webpack التكوين

قم بإنشاء ملف مسمى webpack.config.js في جذر دليل المشروع الخاص بك. هذا هو المكان الذي ستقوم بتكوينه Webpack.

const path = require('path');  
  
module.exports = {  
  entry: './src/index.js', // Entry point of your application  
  output: {  
    filename: 'bundle.js', // Output file name  
    path: path.resolve(__dirname, 'dist') // Output directory  
  }  
};

إنشاء المجلدات والملفات

قم بإنشاء src مجلد في الدليل الجذر ، وداخله ، قم بإنشاء ملف يسمى index.js ليكون بمثابة الملف الرئيسي للتطبيق الخاص بك.

يجري Webpack

افتح Terminal الأمر التالي وقم بتشغيله لتجميع التعليمات البرمجية المصدر باستخدام Webpack:

npx webpack

بعد تشغيل هذا الأمر ، Webpack سوف يتبع التكوين ، ويجمع الملف index.js ، وينشئ ملف الإخراج المسمى bundle.js في dist الدليل.

استخدم في HTML

أنشئ ملف HTML في الدليل dist أو موقعك المفضل واربطه بالملف bundle.js:

<!DOCTYPE html>  
<html>  
<head>  
  <title>Webpack App</title>  
</head>  
<body>  
  <script src="bundle.js"></script>  
</body>  
</html>

قم بتشغيل التطبيق

افتح ملف HTML في متصفحك وتحقق مما إذا كان التطبيق الخاص بك يعمل.

هذا مجرد دليل أساسي. Webpack لديه العديد من الميزات القوية مثل التعامل مع CSS ، وإدارة الوحدات ، واستخدام برامج التحميل والمكونات الإضافية ، وتحسين كود المصدر ، وغير ذلك الكثير. استكشف الوثائق الرسمية Webpack للاستفادة الكاملة من إمكانات هذه الأداة.