التطوير - Vagrant
إذا كان لديك مشروع أكثر تقدمًا وتستخدم Vagrant لتشغيل بيئة التطوير داخل آلة افتراضية، فغالبًا ستحتاج أيضًا إلى تشغيل webpack داخل الآلة الافتراضية.
إعداد المشروع
للبدء، تأكد من أن ملف Vagrantfile يحتوي على عنوان IP ثابت:
Vagrant.configure("2") do |config|
config.vm.network :private_network, ip: "10.10.10.61"
endبعد ذلك، ثبّت webpack وwebpack-cli و@webpack-cli/serve وwebpack-dev-server في مشروعك:
npm install --save-dev webpack webpack-cli @webpack-cli/serve webpack-dev-serverتأكد من وجود ملف webpack.config.js. إذا لم يكن لديك واحد بعد، فاستخدم هذا المثال المصغّر للبدء:
import path from "node:path";
import { fileURLToPath } from "node:url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export default {
context: __dirname,
entry: "./app.js",
};ثم أنشئ ملف index.html. يجب أن يشير وسم script إلى الحزمة الخاصة بك. إذا لم يتم تحديد output.filename في الإعدادات، فسيكون ذلك bundle.js.
<!DOCTYPE html>
<html>
<head>
<script src="/bundle.js" charset="utf-8"></script>
</head>
<body>
<h2>Hey!</h2>
</body>
</html>لاحظ أنك تحتاج أيضًا إلى إنشاء ملف app.js.
تشغيل الخادم
الآن، دعنا نشغّل الخادم:
webpack serve --host 0.0.0.0 --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-pollافتراضيًا، لن يكون الخادم متاحًا إلا من localhost. سنصل إليه من جهاز المضيف، لذلك نحتاج إلى تغيير --host للسماح بذلك.
سيضمّن webpack-dev-server سكربتًا داخل حزمتك يتصل بـ WebSocket لإعادة التحميل عند حدوث تغيير في أي من ملفاتك.
يضمن الخيار --client-web-socket-url أن يعرف السكربت أين يبحث عن WebSocket. سيستخدم الخادم المنفذ 8080 افتراضيًا، لذلك ينبغي أن نحدده هنا أيضًا.
يضمن --watch-options-poll أن webpack يستطيع اكتشاف التغييرات في ملفاتك. افتراضيًا، يستمع webpack إلى الأحداث التي يطلقها نظام الملفات، لكن VirtualBox لديه مشكلات كثيرة مع ذلك.
ينبغي أن يكون الخادم متاحًا الآن على http://10.10.10.61:8080. إذا أجريت تغييرًا في app.js، فينبغي أن تتم إعادة التحميل مباشرةً.
الاستخدام المتقدم مع nginx
لمحاكاة بيئة أقرب إلى الإنتاج، من الممكن أيضًا تمرير webpack-dev-server عبر وكيل nginx.
أضف ما يلي إلى ملف إعدادات nginx:
server {
location / {
proxy_pass http://127.0.0.1:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
error_page 502 @start-webpack-dev-server;
}
location @start-webpack-dev-server {
default_type text/plain;
return 502 "Please start the webpack-dev-server first.";
}
}أسطر proxy_set_header مهمة لأنها تسمح لـ WebSockets بالعمل بشكل صحيح.
بعد ذلك يمكن تغيير أمر تشغيل webpack-dev-server إلى الآتي:
webpack serve --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-pollهذا يجعل الخادم متاحًا فقط على 127.0.0.1، وهذا مناسب لأن nginx يتولى إتاحته على جهاز المضيف لديك.
الخاتمة
جعلنا صندوق Vagrant متاحًا من خلال عنوان IP ثابت، ثم جعلنا webpack-dev-server متاحًا علنًا بحيث يمكن الوصول إليه من المتصفح. بعد ذلك عالجنا مشكلة شائعة وهي أن VirtualBox لا يرسل أحداث نظام الملفات، مما يؤدي إلى عدم إعادة تحميل الخادم عند تغيّر الملفات.
1 Contributor
