البدء باستخدام Webpack [مع مثال لمشروع]

Webpack هو وحدة المجمعة التي تسهل بناء تطبيقات جافا سكريبت المعقدة. لقد اكتسب قوة جدية منذ أن اختارها مجتمع React كأداة البناء الرئيسية. Webpack هو لا مدير الحزم ولا عداء المهمة لأنه يستخدم نهجا مختلفا (أكثر تقدما) ، ولكن هدفه هو أيضا إعداد عملية بناء ديناميكية.

Webpack يعمل مع جافا سكريبت الفانيليا. يمكنك استخدامه ل حزمة الأصول الثابتة للتطبيق, مثل الصور والخطوط وأوراق الأنماط والبرامج النصية في ملف واحد واحد بينما رعاية جميع التبعيات.

لن تحتاج إلى Webpack لإنشاء تطبيق أو موقع ويب بسيط ، على سبيل المثال أحد التطبيقات يحتوي على ملف JavaScript واحد وملف CSS واحد فقط وعدد قليل من الصور ، ومع ذلك يمكن أن يكون المنقذ للحياة ل تطبيق أكثر تعقيدا مع العديد من الأصول والتبعيات.

Webpack مقابل العدائين المهمة مقابل Browserify

لذلك ، كيف تكدس Webpack بالمقارنة مع أدوات البناء الأخرى مثل Grunt أو Gulp أو Browserify?

جرونت وجولب عدائي مهمة. في ملف التكوين الخاص بك ، أنت تحديد المهام, ويقوم عداء المهمة بتنفيذها. ال سير عمل عداء المهمة يبدو أساسا مثل هذا:

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

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

إذا كنت تريد معرفة المزيد عن كيف تقارن Webpack بأدوات البناء الأخرى, أوصي لك مقالتين:

1. أندرو راي Webpack: متى يتم الاستخدام ولماذا على مدونته الخاصة
2. كوري هاوس متصفح مقابل Webpack على freeCodeCamp (مع الرسوم التوضيحية رهيبة)

الرسوم التوضيحية اثنين أعلاه هي من مواد Webpack لكتيب Pro React, مورد آخر يستحق نظرة.

أربعة مفاهيم أساسية من Webpack

Webpack له أربعة خيارات التكوين الرئيسية دعا “المفاهيم الأساسية” ستحتاج إلى تحديد في عملية التطوير:

1. دخول - ال نقطة البداية الرسم البياني التبعية (واحد أو أكثر من ملفات JavaScript).
2. انتاج | - الملف حيث تريد الإخراج لتكون المجمعة ل (ملف JavaScript واحد).
3. رافعات - التحولات على الأصول التي تحويلها إلى وحدات Webpack بحيث يمكن أن يكون يضاف إلى الرسم البياني التبعية. على سبيل المثال, المغلق محمل يستخدم لاستيراد ملفات CSS.
4. الإضافات - الإجراءات المخصصة والوظائف أجريت على الحزمة. على سبيل المثال ، فإن I18N-webpack-المساعد تضمين الترجمة في الحزمة.

تعمل اللوادر على أساس كل ملف قبل التجميع يحدث. يتم تنفيذ الإضافات على الكود المجمّع, في نهاية عملية التجميع.

تثبيت Webpack

إلى تثبيت Webpack, افتح سطر الأوامر ، وانتقل إلى مجلد المشروع ، وقم بتشغيل الأمر التالي:

 npm init 

إذا كنت لا تريد إجراء التكوين بنفسك ، فيمكنك إجراء npm ملء package.json ملف مع القيم الافتراضية باستخدام الأمر التالي:

 npm init -y 

بعد ذلك ، قم بتثبيت Webpack:

 npm تثبيت webpack - حفظ ديف 

إذا كنت قد استخدمت القيم الافتراضية هذه هي الطريقة الخاصة بك package.json يجب أن يبدو الملف الآن (يمكن أن تكون الخصائص بترتيب مختلف):

 "name": "_tests" ، "version": "1.0.0" ، "description": "" ، "main": "webpack.config.js" ، "تبعيات": "webpack": "^ 3.6 .0 "،" devDependencies ": " webpack ":" ^ 3.6.0 "،" scripts ": " test ":" echo \ "خطأ: لم يتم تحديد اختبار \" && exit 1 "،" الكلمات الرئيسية ": []،" author ":" "،" license ":" ISC " 

قم بإنشاء ملف التكوين

تحتاج إلى إنشاء webpack.config.js ملف في المجلد الجذر للمشروع. يحتوي ملف التكوين هذا على دور مركزي ، حيث أن هذا هو المكان الذي تريده تحديد المفاهيم الأساسية الأربعة (نقاط الدخول ، الإخراج ، اللوادر ، الإضافات).

ال webpack.config.js ملف يحمل كائن التكوين من الخصائص التي تحتاج إلى تحديد. في هذه المقالة ، سنقوم بتحديد الخصائص الأربعة التي تتوافق مع المفاهيم الأساسية الأربعة (دخول, انتاج, وحدة, و توصيل في) ، ولكن كائن التكوين له خصائص أخرى كذلك.

1. إنشاء نقطة (نقاط) الدخول

بإمكانك أن تأخذ نقطة دخول واحدة أو أكثر. تحتاج إلى تحديدها في دخول خاصية.

أدخل مقتطف الشفرة التالي في webpack.config.js ملف. هذا يحدد نقطة دخول واحدة:

 module.exports = entry: "./src/script.js"؛ 

لتحديد أكثر من نقطة دخول واحدة يمكنك استخدامها إما الصفيف أو بناء جملة الكائن.

في مجلد المشروع الخاص بك, إنشاء جديد SRC مجلد و script.js ملف داخله. هذا سيكون لديك نقطة الدخول. لأغراض الاختبار ، فقط ضع الخيط داخله. لقد استخدمت ما يلي (ومع ذلك ، يمكنك أيضًا استخدام واحدة أكثر إثارة للاهتمام):

 const greeting = "مرحبًا ، أنا مشروع بداية Webpack."؛ الأمر document.write (تحية)؛ 

2. تحديد الإخراج

بإمكانك أن تأخذ ملف إخراج واحد فقط. حزم Webpack جميع الأصول في هذا الملف. تحتاج إلى تكوين انتاج الملكية بالطريقة التالية:

 const مسار = تتطلب ("مسار") ؛ module.exports = entry: "./src/script.js"، output: filename: "bundle.js"، path: path.resolve (__ dirname، 'dist')؛ 

ال اسم الملف تحدد الملكية اسم الملف المجمعة, بينما ال مسار خاصية يحدد اسم الدليل. المثال أعلاه سيخلق /dist/bundle.js ملف.

على الرغم من أنها ليست إلزامية ، فمن الأفضل أن استخدم ال path.resolve () طريقة عند تحديد مسار الملكية ، كما هو يضمن دقة وحدة القرار (يتم إنشاء المسار المطلق للإخراج وفقًا لقواعد مختلفة في بيئات مختلفة ، يحل دقة الوحدة النمطية هذا التناقض). إذا كنت تستخدم path.resolve, أنت بحاجه إلى تطلب ال مسار وحدة العقدة في الجزء العلوي من webpack.config.js ملف.

3. إضافة رافعات شوكية

إلى أضف اللودرات, تحتاج إلى تحديد وحدة خاصية. أدناه ، نضيف بابل محمل هذا يسمح لك استخدم بأمان ميزات ECMAScript 6 في ملفات JS الخاصة بك:

 const مسار = تتطلب ("مسار") ؛ module.exports = entry: "./src/script.js" ، الإخراج: filename: "bundle.js" ، path: path.resolve (__ dirname، 'dist') ، الوحدة النمطية: rules: [test: : /\.js$/، exclude: / (node_modules | bower_components) /، use: loader: "babel-loader"، options: presets: ["env"]]؛ 

قد يبدو التكوين صعبًا ، لكنه مجرد نسخ منه بابل محمل الوثائق. تأتي معظم اللوادر مع ملف تمهيدي أو نوع من الوثائق ، لذلك يمكنك (تقريبًا) أن تعرف دائمًا كيفية تكوينها بشكل صحيح. كما تحتوي مستندات Webpack على صفحة تشرح كيفية تكوين module.rules.

يمكنك إضافة كما العديد من رافعات ما تحتاج إليه, وهنا القائمة الكاملة. لاحظ أنك تحتاج أيضا إلى تثبيت كل محمل مع npm لجعلها تعمل. لمحمل Babel ، تحتاج إلى تثبيت حزم Node الضرورية مع npm:

 npm install --save-dev babel-loader babel-core babel-preset-env webpack 

إذا كان لديك نظرة على package.json ملف ، سترى هذا npm وأضاف ثلاث بابل ذات الصلة الى الحزم devDependencies خاصية, هذه سوف تهتم تجميع ES6.

4. أضف الإضافات

إلى أضف الإضافات, تحتاج إلى تحديد الإضافات خاصية. بالاضافة الى ذلك ، لديك أيضا ل تطلب الإضافات واحدا تلو الآخر, كما هي وحدات خارجية.

في مثالنا ، نضيف مكونين إضافيين Webpack: HTML Webpack المساعد و ال التحميل المسبق Webpack المساعد. Webpack لديه النظام البيئي المساعد لطيفة, يمكنك تصفح القائمة الكاملة هنا.

لطلب الإضافات كوحدات عقدة, إنشاء اثنين من الثوابت الجديدة: HtmlWebpackPlugin و PreloadWebpackPlugin و استخدم ال تطلب() وظيفة.

 const مسار = تتطلب ("مسار") ؛ const HtmlWebpackPlugin = require ("html-webpack-plugin")؛ const PreloadWebpackPlugin = require ("preload-webpack-plugin")؛ module.exports = entry: "./src/script.js" ، الإخراج: filename: "bundle.js" ، path: path.resolve (__ dirname، 'dist') ، الوحدة النمطية: rules: [test: : /\.js$/ ، استبعاد: / (node_modules | bower_components) / ، استخدم: loader: "babel-loader" ، الخيارات: presets: ["env"]] ، الإضافات: [HtmlWebpackPlugin جديدة () ، PreloadWebpackPlugin ()] جديد ؛ 

تمامًا كما في حالة اللوادر ، عليك أيضًا القيام بذلك تثبيت الإضافات Webpack مع npm. لتثبيت المكوّنات الإضافية في المثال ، قم بتشغيل الأمرين التاليين في سطر الأوامر:

 npm install html-webpack-plugin --save-dev npm install --save-dev preload-webpack-plugin 

إذا كنت تحقق الخاص بك package.json الملف الآن ، سترى هذا npm وأضاف اثنين من الإضافات إلى devDependencies خاصية.

تشغيل Webpack

إلى إنشاء شجرة التبعية و إخراج الحزمة, قم بتشغيل الأمر التالي في سطر الأوامر:

 webpack 

بالعادة يستغرق دقيقة أو دقيقتين ل Webpack لبناء المشروع. عند الانتهاء ، سترى رسالة مماثلة في CLI:

إذا سارت الأمور على ما يرام Webpack إبتكرت حي مجلد في جذر مشروعك و وضع الملفين المجمعين (bundle.js و index.html و) داخله.

جيثب ريبو

إذا كنت تريد التحقق من المشروع بالكامل أو تنزيله أو تفرعه ، فقم بإلقاء نظرة على تقرير Github الخاص بنا.