webpack چیست ؟ و چه ویژگی هایی دارد

webpack چیست ؟ و چه ویژگی هایی دارد

webpack چیست ؟ و چه ویژگی هایی داردWhat is Webpack and whats features

webpack چیست ؟ و چه ویژگی هایی دارد

توسط : admin
Webpack یک بسته بندی کننده ماژول است. Webpack می تواند در کنار یک اجرا کننده به طور جداگانه از بسته بندی ها مراقبت کند. با این حال ، به لطف توسعه دهندگان افزونه های Webpack ، فاصله بین bundler و اجرا کننده از بین رفته است.

 

عموما از این افزونه  برای انجام کارهایی استفاده می شود که معمولاً در خارج از صفحه وب انجام می شوند ، نظیر تمیز کردن دایرکتوری build  یا تهیه خروجی نهایی از این فولدر.

React و (Hot Modulation Replaction (HMR  باعث محبوب شدن وبپک  در نتیجه منجر به استفاده از آن در محیط های دیگر مانند Ruby on Rails نیز شده اند. با وجود نام آن ، وبپک فقط به وب محدود نمی شود. بلکه می تواند با سایر اهداف نیز همراه باشد.

 

Webpack متکی به ماژول ها است

کوچکترین پروژه ای که می توانید توسط وبپک ، باندل کنید باید شامل ورودی و خروجی باشد. فرآیند بسته بندی از ورودی های تعریف شده توسط کاربر شروع می شود. خود ورودی ها ماژول هستند و می توانند از طریق import به ماژول های دیگر اشاره کنند.

 

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

Webpack از قالب های ماژول ES2015 ، CommonJS و AMD پشتیبانی می کند. مکانیزم لودر برای CSS ، با پشتیبانی از import@ و ()url  از طریق css-loader  نیز بخوبی کار می کند. همچنین می توانید افزونه هایی را برای کارهای خاص ، مانند minification ، بین المللی سازی ، HMR و غیره پیدا کنید.

نمودار وابستگی گراف ، چگونگی ارتباط گره ها به یکدیگر را توصیف می کند. در این حالت ، تعریف نمودار از طریق ارجاعات (require, import) بین پرونده ها تعریف می شود. Webpack بطور استاتیک بدون نیاز به منبع ، این نمودارها را مرور می کند تا گرافی را که برای ایجاد بسته ها ایجاد می کند ، تولید کند.

 

فرآیند اجرای وبپک

فرایند اجرای وبپک
فرایند اجرای webpack

 

Webpack کار خود را از ورودی ها شروع می کند. غالباً ورودی ها ، ماژولهای JavaScript هستند که در وبپک فرآیند تراکم خود را شروع می کند. در طی این فرآیند ، وبپک ورودی ها را با تنظیمات لودر و چگونگی تبدیل هر کدام ، مقایسه می کند.

 

فرایند تحلیل

خود ورودی یک ماژول است. هنگامی که Webpack با اولین ورودی روبرو می شود ، سعی می کند با استفاده از سیستم تحلیل خود  ، ورودی را با سیستم پرونده مطابقت دهد. می توانید علاوه بر node_modules ، به Webpack بگویید که جستجو را در بین دایرکتوری های خاص نیز انجام دهد. همچنین می توانید نحوه مطابقت Webpack در برابر پسوند فایل ها را تنظیم کنید ، و می توانید نام های مستعار خاصی را برای دایرکتوری ها تعریف کنید.

اگر تحلیل موفق نبود  ، Webpack خطای زمان اجرا را پرتاب می کند. اگر Webpack موفق به تحلیل صحیح یک پرونده شود ، پردازش را براساس تعریف لودر ، روی پرونده یافت شده انجام می دهد. هر لودر یک تغییر خاص در برابر محتویات ماژول اعمال می کند.

نحوه پیکربندی لودر در برابر یک فایل تحلیل شده می تواند به چندین روش تنظیم شود ، از جمله با توجه به نوع پرونده و محل قرارگیری در سیستم فایل. انعطاف پذیری Webpack حتی به شما امکان می دهد یک تغییر خاص را بر اساس پرونده ای که در این پروژه وارد شده است اعمال کنید.

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

 

وبپک هر نوع فایلی را تحلیل میکند

Webpack در هنگام ساختن گراف وابستگی ، هر ماژول را بررسی میکند. اگر یک ورودی حاوی وابستگی باشد ، روند کار به طور بازگشتی در برابر هر وابستگی انجام خواهد شد تا زمانی که مسیر کامل شود. Webpack برخلاف ابزارهای تخصصی مانند کامپایلرهای بابل یا Sass ، می تواند این فرآیند را در برابر هر نوع پرونده ای انجام دهد.

Webpack به شما امکان می دهد تا نحوه رفتار منابع مختلفی که با آن روبرو هستید کنترل کنید. به عنوان مثال ، برای جلوگیری از درخواست ، می توانید تصمیم بگیرید که منابع موجود در بسته های JavaScript خود را وارد کنید. همچنین Webpack به شما امکان می دهد از تکنیک هایی مانند ماژول های CSS برای جفت کردن استایل با کامپوننت ها استفاده کنید و از مشکلات مربوط به استایل دهی  استاندارد CSS جلوگیری کنید. این انعطاف پذیری همان چیزی است که باعث می شود Webpack بسیار با ارزش باشد.

اگرچه از Webpack عموما برای بسته بندی JavaScript استفاده می شود ،ولی می تواند منابعی مانند تصاویر یا فونت ها را ذخیره کند و پرونده های جداگانه ای برای آنها منتشر کند. ورودی ها فقط یک نقطه شروع روند بسته بندی هستند. اینکه وبپک چه کاری انجام دهد  کاملاً به نحوه پیکربندی آن بستگی دارد.

 

فرآیند ارزیابی

با فرض اینکه همه لودرها پیدا شدند ، وب پک لودرهای همسان را از پایین به بالا و راست به چپ (((styleLoader (cssLoader ('./ main.css') هنگام اجرای ماژول از طریق هر لودر به نوبه خود ارزیابی می کند. در نتیجه ، شما خروجی دریافت می کنید که وب پک در بسته نرم افزاری حاصل از آن تزریق می کند.

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

اگرچه لودرها می توانند کارهای زیادی انجام دهند ، اما انعطاف کافی را برای کارهای پیشرفته فراهم نمی کنند. افزونه ها می توانند رویدادهای زمان اجرا را که توسط وبپک بسته شده است رهگیری کنند. یک مثال خوب استخراج بسته نرم افزاری است که توسط MiniCssExtractPlugin انجام می شود و در صورت استفاده از لودر ، فایل های CSS را از بسته نرم افزاری خارج کرده و در یک پرونده جداگانه قرار می دهد. بدون این مرحله ، CSS در جاوا اسکریپت بسته بندی می شود ، زیرا وبپک به صورت پیش فرض با تنظیمات JavaScript رفتار می کند.

 

به پایان رساندن

پس از ارزیابی هر ماژول ، وبپک خروجی را می نویسد. خروجی شامل یک اسکریپت bootstrap با یک مانیفست است که نحوه شروع اجرای نتیجه در مرورگر را توصیف می کند. خروجی براساس هدفی که شما استفاده می کنید متفاوت است (هدف قرار دادن وب ، تنها گزینه نیست).

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

 

پیکربندی وب پک

وبپک در هسته خود ، به پیکربندی متکی است. در اینجا یک نمونه از پیکر بندی را آورده ایم :

webpack.config.js
const webpack = require("webpack");

module.exports = {
  // Where to start bundling
  entry: {
    app: "./entry.js",
  },

  // Where to output
  output: {
    // Output to the same directory
    path: __dirname,

    // Capture name from the entry using a pattern
    filename: "[name].js",
  },

  // How to resolve encountered imports
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },

  // What extra processing to perform
  plugins: [
    new webpack.DefinePlugin({ ... }),
  ],

  // Adjust module resolution algorithm
  resolve: {
    alias: { ... },
  },
};

مدل پیکربندی Webpack می تواند بعضی مواقع کمی مبهم شود زیرا پرونده پیکربندی می تواند یکپارچه به نظر برسد. درک این مسئله که Webpack چه کاری انجام می دهد دشوار است مگر اینکه ایده های پشت آن را بدانید.

 

هشینگ

با استفاده از وب پک ، می توانید برای هر بسته بندی نامی هش شده (به عنوان مثال ، d587bbd6.js) تعیین کنید تا بسته های موجود در سمت کلاینت به عنوان تغییرات جدید ایجاد شوند. تقسیم بسته نرم افزاری به کلاینت اجازه می دهد تا تنها بخش کوچکی از داده ها را در حالت ایده آل بارگذاری مجدد کند.

 

هات ریلودر

احتمالاً قبلاً با ابزارهایی مانند LiveRelload یا BrowserSync آشنا شده اید. این ابزارها هنگام ایجاد تغییرات ، مرورگر را به طور خودکار بروز می کنند. جایگزینی ماژول داغ (HMR) یک قدم جلوتر رفته است. در  React ، به برنامه اجازه می دهد وضعیت خود را بدون اجبار به بروز رسانی کردن حفظ کند. در حالی که این قابلیت ممکن است چیز خاصی به نظر نمی رسد ، می تواند در عمل تفاوت بزرگی ایجاد کند.

HMR همچنین در Browserify از طریق livereactload در دسترس است ، بنابراین این یک ویژگی منحصر به فرد در وبپک نیست.

 

تقسیم کد

علاوه بر HMR ، قابلیت های بسته بندی وبپک گسترده است. Webpack به شما امکان می دهد کد را به روش های مختلف تقسیم کنید. حتی می توانید با اجرای برنامه ، کد را بصورت دینامیکی بارگذاری کنید. این نوع بارگذاری تنبل مخصوصاً برای کاربردهای وسیع بسیار مفید است ، زیرا در صورت لزوم می توانید وابستگی ها را در زمان اجرا بارگیری کنید.

 

حتی برنامه های کوچک می توانند از تقسیم کد بهره مند شوند ، زیرا این امکان را به کاربران می دهد تا چیزی را که قابل استفاده است  سریعتر در دست خود داشته باشند. کیفیت عملکرد یک ویژگی مهم است. دانستن این تکنیک های اساسی بسیار ارزشمند است.

 

نتیجه گیری

Webpack دارای یک منحنی یادگیری است. با این حال ، هرچه وقت بیشتری برای یادگیری بگذارید در زمان خود صرفه جویی میکنید.

 

Webpack همه چیز را حل نمی کند. با این حال ، مشکل بسته بندی را حل کرده و  یکی از نگرانی های توسعه را کمتر میکند. استفاده از package.json و وبپک به تنهایی می تواند شما را  از بسیاری مشکلات دور کند.

 

به طور خلاصه:

  • Webpack یک ابزار بسته بندی ماژول است ، اما همچنین می توانید از آن برای اجرای برنامه ها نیز استفاده کنید.
  • Webpack به یک گراف وابستگی تکیه می کند. Webpack برای ساخت گراف از طریق سازنده  منبع حرکت می کند و از این اطلاعات و پیکربندی برای تولید بسته های مختلف استفاده می کند.
  • Webpack به لودرها و افزونه ها متکی است. لودرها در سطح ماژولار کار می کنند ، در حالی که افزونه ها به هوک های تهیه شده توسط Webpack متکی هستند و به فرایند اجرای آن بهترین دسترسی را دارند.
  • پیکربندی Webpack نحوه تبدیل منابع از طریق گرافو چگونگی نوع خروجی را  ارائه می دهد. اگر از ویژگیهایی مانند تقسیم کد استفاده شود ، بخشی از این اطلاعات را می توان در منبع خود بگنجاند.
  • جایگزینی ماژول داغ (HMR) به محبوب سازی وبپک کمک کرده است. این ویژگی است که می تواند با به روز کردن کد در مرورگر و بدون نیاز به تجدید کامل صفحه  ، تجربه توسعه را ارتقا بخشد.
  • Webpack می تواند نام های هش شده برای فایل های خروجی ایجاد کند و به شما امکان می دهد بسته های قبلی را باطل کنید.

 

نظرات :

در عرض چند دقیقه برای ایجاد حساب

کاربری خود اقدام کنید


اکنون حساب کاربری خود را ایجاد کنید!


ایجاد حساب کاربری

با ثبت نام در نیلوتک از آخرین بروز رسانی های آموزش ها و مقالات سایت مطلع شوید