--- title: Running Webpack and Webpack Dev Server localeTitle: تشغيل 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 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! ` فلنتحقق من جزء "العناصر" الخاص بك في أدوات المطور الخاصة بنا. يجب أن يكون لدينا ما يلي: `` React Webpack Example

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` #### معلومات اكثر: [موقع Webpack](https://webpack.js.org/) [Webpack جيثب](https://github.com/webpack/webpack) [webpack-dev-server جيثب](https://github.com/webpack/webpack-dev-server)