تا %60 تخفیف خرید برای 2 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش Webpack قسمت آخر: استفاده از DevServer

ضمیمه ها

WebpackSample.rar

با یاد گیری مفاهیم Webpack و چگونگی استفاده از آن، وقتش رسیده که در مورد Development Server صحبت کنیم. تا اینجا ما با هر بار تغییر فایل ها دستور npm run build برای ایجاد فایل های خروجی اجرا میکردیم که با پیچیده شدن پروژه و افزایش تعداد فایل ها و ماژول هایی که استفاده میکنیم، مدت زمان build به شدت افزایش پیدا میکنه. در کنار این موارد باید هر بار فایل index.html رو باز کنیم و رفرش کنیم تا خروجی تولید شده رو ببینیم. اما بوسیله استفاده از Webpack Development Server این مشکلات کامل حل میشه. زمانی که Development Server رو استفاده می کنیم، با هر بار تغییر فایل ها عملیات build با سرعت بالاتری انجام شده و تغییرات برای ما به صورت خودکار نمایش داده می شوند. علاوه بر این موارد، به جای باز کردن فایل index.html، از یک آدرس مانند http://localhost:9000 برای مشاهده وب سایت استفاده میکنیم.
در اولین قدم، developemt server رو بوسیله دستور زیر نصب می کنیم:

npm install webpack-dev-server --save-dev

داخل فایل webpack.config.js هم بخشی به نام devServer به صورت زیر اضافه میکنیم:

devServer: {
 port: 9000,
 contentBase: path.resolve(__dirname, 'build')
},

در تنظیمات بالا ما تنظیمات پورت رو روی 9000 قرار دادیم که هر عددی رو می تونید انتخاب کنید، بوسیله contentBase هم مشخص کردیم که محتویات سایت از چه پوشه ای باید خونده بشه. اگر از این گزینه استفاده نکنیم، پوشه اصلی که فایل webpack.config.js داخلش قرار گرفته در نظر گرفته میشه، اما به این خاطر که ما از html-webpack-plugin استفاده کردیم و فایل html داخل پوشه build قرار میگیره، مسیر contentBase رو مشخص کردیم.
تغییر مورد نیاز بعدی اضافه کردن یک اسکریپت جدید به فایل package.json است که بتونیم dev server رو اجرا کنیم. بخش script رو به صورت زیر تغییر میدیم:

"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},

در انتها برای اجرای dev serve کافیه دستور npm run start رو اجرا کنیم تا خروجی زیر نمایش داده بشه:

i 「wds」: Project is running at http://localhost:9000/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from D:\WebpackSample\build
‼ 「wdm」: Hash: 7cf77f481bcbc5fca949

در پیام بالا مشخص شده که پروژه ما از آدرس localhost:9000 در دسترس است و اگر این آدرس رو داخل مرورگر باز کنیم، صفحه html برای ما باز میشه. موضوع دیگه ای که باید بهش اشاره کنیم، در صورت تغییر هر یک از فایل ها، دیگه نیازی به build کردن پروژه نیست و تغییرات به صورت خودکار اعمال میشن.
مباحث مربوط به Webpack خیلی گسترده هست و ما سعی کردیم در یکسری مطالب مهمترین ویژگی های این ابزار رو ذکر کنیم. دوستان می تونن با مراجعه به وب سایت Webpack و مطالعه مستندات داخل سایت با سایر ویژگی های این ابزار قدرتمند آشنا بشن.

کدهای این قسمت به صورت ضمیمه از ابتدای این مطلب قابل دریافت هست. قبل از استفاده از کدها دستور npm install رو برای resolve کردن dependency ها اجرا کنید.

نویسنده: حسین احمدی
منبع: جزیره طراحی و توسعه وب توسینسو
هر گونه نشر و کپی برداری با ذکر نام منبع و نویسنده بلامانع است

نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند