همه چیز در مورد کار با Webpack 4 برای مدیریت Module bundling - قسمت 2 - آموزش کار با Loader ها



visibility  
mode_comment   ۰

همه چیز در مورد کار با Webpack 4 برای مدیریت Module bundling - قسمت 2در این قسمت میخوام مطلب همه چیز در مورد کار با Webpack 4 رو ادامه بدم و اطلاعات بیشتری رو در مورد Module bundling در اختیارتون قرار بدم.

Loaders

Loader به شما این امکان رو میده که بر روی فایلهایی که import میکنید، پیش پردازنده یا preprocessor های مورد نظرتون رو اجرا کنید. این امکان به شما اجازه میده که منابع استاتیک رو هم علاوه بر فایلهای Javascript در bundle خروجی قرار بدین. در ابتدا میخوایم ببینیم که چه کارهایی میتونیم در زمان لود شدن فایلهای Javascript انجام بدیم.

خب در اینجا میخوایم کدهای مدرن Javascript رو با استفاده از babel کامپایل کنیم و کاری کنیم که بتونیم از آخرین ویژگی‌های Javascript استفاده کرده و همه مرورگرها نیز از اون پشتیبانی بکنند. برای کار با Babel در پروژه، بسته‌های زیر رو نصب میکنیم:

  • babel-loader
  • @babel/core
  • @babel/preset-env
  • @babel/plugin-syntax-dynamic-import
  • @babel/polyfill

برای نصب این بسته‌ها در Command line دستور زیر را اجرا میکنیم:

موارد بالا رو بصورت devDependencies نصب کردیم و @babel/polyfill رو بصورت dependencies نصب میکنیم. حالا کدهای درون فایل webpack.config.js رو بصورت زیر تغییر میدیم:

میبینید که در بخش module یک ویژگی rules اضافه شده و برای فایلهایی که در انتهای اونا .js قرار داره، babel-loader اعمال میشه. حالا در ریشه پروژه یک فایل بنام .babelrc به وجود میاریم و تنظیمات مربوط به babel رو در اون قرار میدم. کدهای زیر رو درون این فایل قرار میدم:

این تنظیمات از کامپایل کردن import و Export جلوگیری میکنه و import های پویا و dynamic رو فعال میکنه که در ادامه و در بخش code splitting بیشتر در مورد اون توضیح میدیم. حالا کدهای زیر رو در فایل index.js قرار میدم:

همونطور که میبینید در کد بالا از padStart که در ES8 معرفی شده است، استفاده شده. حالا اگر کد رو با استفاده npm run build کامپایل کنیم و فایل index.html رو در مرورگر Internet explorer باز کنیم، میبینیم که wowwowwowwoes8 در console چاپ میشه و میبینید که این کدهای مدرن در مرورگر Internet explorer نیز پشتیبانی میشه.

استفاده از Sass

Loader ها میتونن در یک سری پشت سر هم بصورت زنجیری قرار بگیرن. برای فهم بیشتر بهتره که یک مثال رو بررسی کنیم. برای اینکار در ابتدا loader های زیر رو در پروژه نصب میکنیم:

حالا کدهای زیر رو به فایل webpack.config.js اضافه میکنیم:

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

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back
  • sass-loader کدهای sass رو به css تبدیل میکنه
  • css-loader کدهای css رو به Javascript تبدیل میکنه و پیش نیازهای اون رو resolve میکنه
  • style-loader کدهای CSS رو در المنت style و در document شما قرار میده

حالا در دایرکتوری src یک فایل بنام style.scss رو میسازم و کدهای زیر رو در اون قرار میدم:

حالا در فایل index.js فایل style.scss رو import میکنیم. بصورت زیر:

حالا اگر از پروژتون build بگیرید و خروجی رو در مرورگر باز کنید، خروجی بصورت زیر خواهد بود:

کار با تصاویر

آخرین مثالی که در مورد loader ها اون رو بررسی میکنیم، کار با تصاویر با استفاده از file-loader هست. در حالت عادی وقتی مرورگر به یک تگ img با ویژگی src یا یک المنت با ویژگی background-image برخورد میکنه، یک درخواست به سرور میده و اون تصویر رو دانلود میکنه و در مرورگر نمایش میده. با استفاده از Webpack میتونین برای تصاویر کوچک این روند رو بهینه سازی کرده و میتونین source یک تصویر رو بصورت رشته در Javascript ذخیره کنید. با اینکار تصویر مورد نظرتون preload میشه و مرورگر برای نمایش اون یک درخواست جداگانه نمیده.

برای اینکار file-loader رو بصورت زیر نصب میکنیم:

حالا کدهای زیر رو در فایل webpack.config.js قرار میدیم:

فرص کنید که یک تصویر بنام code.png در دایرکتوری src داریم. حالا یک فایل بنام image.js میسازیم و کدهای زیر رو درونش قرار میدیم:

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 56)

حالا این فایل رو در index.js وارد میکنیم. حالا اگر خروجی رو در مرورگر مشاهده کنیم، میبینید که تصویر مورد نظر در صفحه قرار گرفته است. شما همچنین میتونین فونت و اطلاعات دیگه رو لود کنیم.

Dependency Graph

شما الان متوجه میشید که loader ها چطور میتونن بقیه منابع مختلف رو در کنار فایلهای Javascript لود کنند. پس الان باید تصویری که در وبسایت Webpack قرار داده شده است رو بهتر متوجه بشید:

همونطور که میبینید همه منابعی که در فایل entry جاوااسکریپت قرار داده شده است، لود میشن و کارهای مورد نظر بر روی اونا انجام میشه و خروجی بصورت استاتیک در اختیارتون قرار میگیره.

Code splitting

همونطور که در مستندات Webpack گفته شده، Code splitting بصورت زیر تعریف میشه.

Code splitting یکی از مهمترین و بهترین ویژگی‌های Webpack هست. این ویژگی به شما این امکان رو میده که کدهای خودتون رو به Bundle های متعددی تقسیم‌بندی کنید و اونا رو بصورت وابسته به هم و یا بصورت موازی در کنار یکدیگر لود کنید. با استفاده از این ویژگی میتونین پروژتون رو بهینه‌تر کنید و با سرعت بیشتری سایتتون رو لود کنید.

همونطور که تا اینجا دیدید فقط یک فایل entry بنام index.js داریم و فقط یک فایل خروجی یا output رو به وجود آوردیم. بعد از مدتی که پروژتون بزرگتر میشه باید کدهاتون رو به تکه‌های کوچکتری تبدیل کنید تا مرورگر مجبور نباشه که در همان شروع سایت، همه کدها رو بصورت یک فایل دانلود کنه. یک راه خوب برای حل کردن این مشکل، استفاده از Code splitting یا Lazy loading هست.

در قسمت بعد بیشتر در مورد Code splitting توضیح میدیم و اطلاعات بیشتری رو در مورد Webpack در اختیارتون قرار میدم.

comment دیدگاه کاربران

نیاز به لاگین

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