5.6 KiB
| title | localeTitle |
|---|---|
| Running Webpack and Webpack Dev Server | تشغيل Webpack و Webpack ديف خادم |
لقد حان الوقت لاستخدام Webpack. نظرًا لتثبيت Webpack عالميًا ، يمكننا تشغيل ما يلي في جهازنا:
webpack
سيقوم هذا بتشغيل ملف webpack.config.js بنا. يجب أن يتم تشغيلها بنجاح ، ويجب أن نرى شيئًا كهذا يظهر في مطرافنا:
Hash: 2474b15611d8d75c5a39 Version: webpack 1.12.14 Time: 1721ms Asset Size Chunks Chunk Names bundle.js 679 kB 0 <a href='https://webpack.github.io/docs/webpack-dev-server.html' target='_blank' rel='nofollow'>emitted] main + 159 hidden modules
لاحظ أنه يشير إلى Asset دعا bundle.js . يخبرنا Webpack أنه قد تم إنشاء هذا الملف عندما ركضنا الأمر webpack . تحقق من مجلد dist الخاص بك ، ويجب أن ترى bundle.js إلى جانب index.html الخاص بك.
سوف تبدو شجرة لدينا الآن مثل هذا:
. ├── dist | ├── bundle.js │ └── index.html ├── node_modules ├── package.json ├── src │ └── js │ └── client.js └── webpack.config.js
والآن بعد أن أصبح لدينا dist/bundle.js ، يشير ملف dist/index.html الآن إلى ملف موجود! إذا ألقينا نظرة على bundle.js ، bundle.js أنها مجموعة من جميع ملفات جافا سكريبت في مشروعنا. رائع!
تفضل بالبحث عن بعض محتويات dist/bundle.js ، مثل This is one cool app! . يمكننا أن نرى سياقه في الملف ، إنه في إطار أسلوب غريب يبحث:
_createClass(Main, [{ key: 'render', value: function render() { return _react2.default.createElement( 'div', null, _react2.default.createElement( 'h1', null, 'This is one cool app!' ) ); } }]);
هذا ما فعلته بابل. لقد حولت الشفرة إلى ES5 وضمنتها بين ملفات جافا سكريبت الأخرى - بما في ذلك جميع وحدات عقدة لدينا ، بالطبع. الآن يمكن أن تشير جميع ملفات React إلى هذه الحزمة باستخدام عبارات import ES6.
أخيرًا ، حان الوقت للتحقق من التطبيق في المتصفح. لهذا ، سوف نستخدم Webpack Dev Server ، وهو عبارة عن أداة غنية بالميزات لاستخدامها في إعداد خادم localhost لتطوير الأغراض عند استخدام Webpack.
-
مساعدة: المزيد عن Webpack ديف خادم
المضي قدما وتشغيل:
webpack-dev-server --content-base dist
نحتاج إلى تضمين --content-base dist لتحديد قاعدة محتوى لـ Webpack Dev Server ، بحيث يعرف مكان الحصول على الملفات ؛ في هذه الحالة ، إنه المجلد dist ، لأن هذا هو المجلد الذي نستخدمه للإنتاج في مقابل المجلد src ، والذي نستخدمه لتطوير *.
في محطتنا ، يجب أن نرى شيئًا كالتالي:
http://localhost:8080/webpack-dev-server/ webpack result is served from / content is served from /Code/react-webpack-example/dist Hash: 2474b15611d8d75c5a39 Version: webpack 1.12.14 Time: 3738ms
وبعد ذلك ستكون هناك قائمة طويلة جدًا لجميع الملفات المجمعة في dist/bundle.js من Webpack. رائعة حقا!
الآن هو الوقت المناسب للتوجه إلى عنوان URL المقدم من خلال ذلك الأمر webpack-dev-server ، http://localhost:8080/ . يجب أن نرى صفحة تحتوي على h1 والتي تنص على ما يلي:
This is one cool app!
فلنتحقق من جزء "العناصر" الخاص بك في أدوات المطور الخاصة بنا. يجب أن يكون لدينا ما يلي:
``
<html lang="en"> <head> </head>This is one cool app!
إذا قمنا بهذا بما src/js/client.js في src/js/client.js ، فسوف نرى كيف يتم عرض React في dist/index.html .
إذا حصلت على هذا الآن ، أحسنت! أنت الآن تعرف كيفية إعداد مساحة عمل باستخدام رمز React و Webpack و ES6 ، وهو أمر رائع ، ويعطيك نقطة البداية لإنشاء تطبيقات ويب رائعة باستخدام أحدث التقنيات.
في البرنامج التعليمي التالي ، سنتناول بعض الخطوات المتقدمة ، بما في ذلك:
- الذهاب إلى مزيد من التفاصيل مع React
- النظر إلى بعض الميزات الرائعة الأخرى لـ Webpack ، مثل تجميع ملفات Sass
- باستخدام minification على
dist/bundle.js