طریق فعال کردن میزبانی شبکه وب پک (webpack) برای خروجی گرفتن

صرفا جهت مقدمه!!

خب این اولین مقاله ی منه و من همیشه سعی کردم رو هر کاری که دست میگذارم، اونو به بهترین نحو یادش بگیرم! و الان تصمیم گرفتم آموخته هام رو با افراد علاقه مند این حوزه به اشتراک بگذارم امیدوارم که از این مقاله بهره کافی رو ببرید خب بریم سر اصل مطلب?

اگه خیلی خلاصه بخوام بگم، ما میخواهیم با وب پک (webpack) که درحال توسعه هستیم خروجی کارهامون رو داخل موبایلمون چک کنیم یا به طور مثال با دیوایس هایی که به شبکمون وصل هستند خروجی رو ببینیم چند تا کار میتونیم انجام بدیم...

من با فرض اینکه شما بلدید با وب پک کار کنید و میدونید کاربردش چیه این مقاله رو مینویسم.

اگه هم این کلمه براتون آشنا نیست میتونید به لینک زیر که سایت رسمیش هست، مراجعه و دربارش مطالعه کنید.

خب مراحل کارو میگم و سرتونو درد نمیارم

• با استفاده از cli command که موقع ساختن وب پک در فایل package.json هست
• با استفاده از فایل کانفیگ وب پک(webpack.config)

با استفاده از cli command

به صورت پیش فرض وب پک واستون روی لوکال هاست اجرا میشه

اگه بخوام مرحله اول رو توضیح بدم کدی که در فایل package.json خودم هست رو میزارم که بهتر متوجه شید

&quotscripts&quot: {
  &quotdev&quot: &quotcross-env NODE_ENV=development webpack-dev-server --open --hot  --host 0.0.0.0&quot,
}

ما اصلا کاری به قسمت ها و آپشن هایی که داده شده نداریم، تنها آپشنی که برای ما مهم است در این بحث اخرین آپشن

--host 0.0.0.0

این ای پی معتبری نیست ولی یه جور اگه بخوام تشبیهش کنم نماد سادست که هرچی ای پی فعال داریم تو شبکه رو برامون فعال میکنه (از 0 تا 255)

اگه با این روش بری میتونی تو pc با آدرس localhost خروجی رو ببینی و

تویه دیوایس به شبکه متصل با ای پی شبکت بعلاوه پورت 192.168.1.118:3000

اگر با این روش رفتید تو ادرس مرورگر مراقب باشید که عین همین ای پی رو وارد نکنید چون با صفحه ی خالی سفید مواجه میشید?(میدونم شما دارک دوست دارید شایدم صفحه ی سیاهه خالی )

روش دیگه ای که میتونید برید اینه که ای پی که به شبکه وصلید رو پیدا کنید که توی تنظیمات شبکه به راحتی میشه پیداش کرد، یه چیزی شبیه به این 192.168.1.180

اگه این عدد رو بزارید به جای صفر ها میزبانی وب پک روی این ip فعال میشه، ولی به نظرم روش اول بهتره چون روی تمام ip های فعال اجرا میشه (مثل لوکال هاست و شبکه )

فقط فراموش نکنید که اگه ip رو اشتباه وارد کنید با ارور مواجه میشید

با استفاده از فایل کانفیگ وب پک(webpack.config)

در این روش شما میتونید با مراجعه به فایل کانفیگ وب پک و تغییر پراپرتی های شی devServer این کار، را انجام دهید.

devServer: {
  historyApiFallback: true,
  noInfo: true,
  overlay: true,
  host: '0.0.0.0',  // you can replace &quotlocalhost&quot or real network ip
  port:3000
},

این کد فایل کانفیگ وب پک من هست و پراپرتی که مهمه واسمون توی این بحث host

امیدوارم این مقاله واستون مفید واقع شده باشه به خدای بزرگ میسپارمتون.