وب پک ( webpack ) در ری اکت چیست ؟ webpack در react چه کاربردی داره ؟

وب پک ( webpack ) در ری اکت یک ماژول باندلر به حساب میاد که وظیفه مدیریت و باندل کردن ( یا همون پک کردن ) Dependencies های پروژه ری اکتی مارو به عهده داره. میشه اینجوری گفت که webpack در ری اکت میاد تمام فایلهای پروژه مثل فایلهای js ،css، تصاویر و .. رو به یک فایل واحد تبدیل میکنه ( پک میکنه ).

با انجام اینکار مرورگر خیلی راحت تر میتونه با دانلود 1 فایل به تمام فایلهای مورد نیاز اپیکیشن ما دسترسی داشته باشه.

البته تو این 2 پاراگراف خیلی خلاصه webpack رو معرفی کردیم ..

اگه میخواین کاربرد وب پک در ری اکت رو بدونین، تو این مقاله با فِرانت اِندی همراه باشین 🙂

وب پک ( webpack ) چیست ؟

وب پک یک ماژول باندلر ( module bundler ) برای اپیکیشن های پیشرفته جاوااسکریپتی به حساب میاد که تمام فایلهای پروژه رو به یک فایل واحد ( bundle.js ) تبدیل میکنه.

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

علاوه بر این، وب پک در ری اکت به ما اجازه میده از loader ها و پلاگین های مختلف برای موارد مختلف مثل minification، linting یا hot module استفاده کنیم. معمولا تو پروژه هایی که با ری اکت توسعه میدیم، از webpack در فاز development استفاده میکنیم.

در نهایت هم برای اینکه از پروژه خودمون Build بگیریم و به فاز production بریم، میتونیم از وب پک در ریکت کمک بگیریم. ( برای Build گرفتن )

برای شروع استفاده از webpack در ری اکت میتونیم یک مسیر ( path ) به webpack بدیم. این مسیر معمولا entry point پروژه ما هست مثل فایل index.js یا main.js …

پس از انجام اینکار، وب پک شروع به جستجو و بررسی پروژه ما میکنه.

اینکه میگیم جستجو میکنه یعنی میاد تمام مواردی که بهش مروبط هست رو آنالیز میکنه ( مواردی مثل فایلهای require، import ، css ها ، URL ها، تصاویر، فونت ها و .. )

در حقیقت میاد و وابستگی های پروژه مارو پیدا میکنه تا بتونه فایل bundle.js رو بسازه.

حالا شاید سوال برامون پیش بیاد که webpack در ریکت چیکار میکنه؟

وب پک چیکار میکنه ؟

اگه بخوایم خلاصه بگیم که webpack در ری اکت دقیقا چیکار میکنه میتونیم به موارد زیر اشاره کنیم :

منابع پروژه مارو باندل ( پک ) میکنه.
به کمک Babel اجازه میده که از جدیدترین ویژگی های جاوااسکریپت استفاده کنیم ( حتی در مرورگر های قدیمی )
یک web server در زمان توسعه اپیکیشن و پروژه در اختیار ما میزاره
کد های بلااستفاده پروژه رو حذف میکنه

خب دیگه مباحث مقدماتی کافیه، بریم سراغ اصل مطلب 🙂

وب پک در ری اکت شامل چه مواردی میشه ؟

چند مفهوم مهم درمورد وب پک در ری اکت وجود داره که باید درکشون کنیم.

این موارد عبارتند از :

مفهوم Loaders در وب پک
مفهوم Dev Server در وب پک
مفهوم Plugins در وب پک
مفهوم Entry در وب پک
مفهوم Output در وب پک

اصلا نگران نباشید چون قراره هرکدوم از این مفاهیم رو باهمدیگه بررسی کنیم و یاد بگیریم 🙂

Entry در وب پک چیست ؟

درحقیقت Entry یک آدرس ( end point ) هست که وب پک در ریکت از طریق این آدرس graph وابستگی های پروژه رو مشخص میکنه.

این آدرس ( end point ) به webpack یک نقطه شروع میده تا وب پک در react بتونه کار خودش رو شروع کنه.

برای تعریف Entry کافیه به فایل webpack.config.js بریم و بصورت زیر end point اپیکیشن خودمون رو به وب پک بدیم :

				
					module.exports =    
{    
   entry: "./src/index.js"    
}

حالا که entry رو مشخص کردیم، میتونیم بریم سراغ output در وب پک!

Output در وب پک چیست ؟

زمانیکه webpack در ری اکت کار خودش رو انجام میده و تمام فایلهای اپیکیشن مارو پک میکنه ( باندل میکنه )، فایل نهایی bundle.js رو باید یک جایی ذخیره کنه. این آدرس رو از طریق output میتونیم به وب پک اعلام کنیم.

علاوه بر آدرس خروجی وب پک، ما میتونیم یکسری تنظیمات اضافه درمورد خروجی webpack تنظیم کنیم:

				
					module.exports = {   
    entry: "./src/index.js"   
    output: {   
        path: "Idist/assets",   
        filename: "bundle.js",   
        publicPath: "assets"   
    }   
}

Loaders در وب پک چیست ؟

Loaders یکی از ویژگی های اصلی webpack در ری اکت هست و به ما اجازه میده assets های خودمون ( تصاویر، CSS ها و ..) رو به ماژول تبدیل کنیم.

اگه بخوایم ساده تر بهش اشاره کنیم، Loaders ها از ما یک ورودی میگیرن و روی ورودی یکسری پردازش انجام میدن ( مثل linting ) و در نهایت اون ورودی رو به ماژول تبدیل میکنن.

ما میدونیم که وب پک باید مدیریت تمام فایلهای assets مثل فایلهای جاوااسکریپت، css، تصاویر و .. رو انجام بده.

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

برای تنظیم Loaders در وب پک باید به فایل webpack.config.js مراجعه کنیم:

( بعدا بیشتر راجب Loaders صحبت میکنیم )

				
					module.exports = {   
    module: {   
        loaders: [{   
            test: /\.(js|jsx)$/,   
            exclude: /(node_modules)/,   
            loader: 'babel-loader',   
            query: {   
                presets: ('es2015', •react, 'stage-Ol']   
            }   
        }, ]   
    }   
}

Dev Server در وب پک چیست ؟

webpack-dev-server یک ابزار قدرتمند هست که توسط خود وب پک ارائه میشه و به ما اجازه میده خیلی ساده تر بتونیم اپیکیشن خودمون رو توسعه بدیم.

ابزار Dev Server به عنوان یک سرور محلی هم شناخته میشه و قابلیت ریلود زنده ( live reload ) اپیکیشن رو به ما ارائه میده. یعنی اگه ما تغییری در کد خودمون اعمال کنیم، وب پک بصورت خودکار این تغییر رو شناسایی میکنه، کد رو کامپایل میکنه و صفحه رو reload میکنه.

برای تنظیم webpack Dev Server کافیه به فایل کانفیگ وب پک در ری اکت بریم و بصورت زیر عمل کنیم :

				
					module.exports = {   
    devServer: {   
        inline: true,   
        contentBase: './dist',   
        port: 8080   
    },   
};

Plugins در وب پک چیست ؟

Plugins در وب پک نقش مهمی در توسعه ی اپیکیشن ها داره. در حقیقت به کمک Plugins میتونیم پروسه Build اپیکیشن رو طبق نیاز خودمون شخصی سازی کنیم.

پلاگین های وب پک، هرکدوم یک وظیفه مشخص دارن و روی کل اپیکیشن تاثیر میزارن.

برای وب پک Plugins های خیلی زیادی وجود داره مثل :

پلاگین HtmlWebpackPlugin : این پلاگین ارائه فایل های HTML رو برای مرورگر خیلی ساده تر میکنه.

پلاگین HotModuleReplacementPlugin : این پلاگین ویژگی Hot Module Replacement یا همون HMR رو فعال میکنه.

برای استفاده از پلاگین های Webpack میتونیم بصورت زیر عمل کنیم :

				
					query: {   
    presets: Ces2015 ', '   
    react ', •stage-m,   
    plugins: ['react-html-attrs'],   
}

وب پک در ری اکت چطور کار میکنه ؟

حالا که تونستیم با webpack در ری اکت و ویژگی های اصلی اون آشنا بشیم، بریم ببینیم که اصلا وب پک در ری اکت چطور کار میکنه ؟!

ما تو هر پروژه فایلهای خیلی زیادی داریم که معمولا عبارتند از: HTML ها، CSS ها، JS ها، فونت ها، تصاویر و …

در ری اکت خروجی اپیکیشن ما یک فایل index.html هست چون اپیکیشن های ری اکتی تک صفحه ( SPA ) هستن. وب پک تمام فایلهای پروژه ( شاید صدها فایل ) رو بهینه میکنه و بعد از باندل کردن بصورت Link به فایل index.html اضافه میکنه.

زمانیکه از وب پک در React استفاده میکنیم شاید اصلا نیاز به انجام تنظیمات یا کانفیگ در وب پک نداشته باشیم چون کانفیگ اولیه خود وب پک در ری اکت خیلی خوب انجام شده.

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

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

این جستجو به واسطه شناسایی import ها و require ها برای پیدا کردن ماژول ها انجام میشه. زمانیکه webpack در ری اکت تمام ماژول های اپیکیشن مارو پیدا میکنه، میره سراغ Loaders ها.

Loaders های وب پک، هر ماژول رو بر اساس نیازی که ما مشخص کردیم باندل میکنه. مثلا کد های ES6 به ES5 تبدیل میشن یا کد های JSX به جاوااسکریپت تبدیل میشن.

زمانیکه کار Loaders به اتمام میرسه، خروجی یک یا چند فایل bundle.js هست و در محلی که خودمون در فایل webpack.config.js مشخص کردیم ذخیره میشن.

این فایل های باندل بصورت Link داخل فایل HTML ما قرار میگیرن. زمانیکه فایل HTML برای کاربر دانلود میشه، فایل یا فایلهای Bundle.js نیز دانلود میشه.

حالا شاید بپرسیم مزیت این ماجرا کجاست؟

مرورگر فقط یک یا چند فایل bundle.js دانلود میکنه اما درحالت عادی باید ده ها یا حتی صدها فایل دانلود میکرد تا اپیکیشن ما برای کاربر به درستی نمایش داده بشه.

با انجام اینکار صفحه و اپیکیشن ما خیلی سریعتر و بهینه تر برای کاربر نمایش داده میشه.

البته راجب مزیت های وب پک برای محیط development ( زمان توسعه پروژه ) هم صحبت کردیم که یکیش reload و کامپایل خودکار پروژه بود که اجازه میداد بدون refresh تغییرات جدید رو در مرورگر ببینیم.

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

نصب webpack در ری اکت

برای نصب وب پک در React ما ابتدا باید Node و NPM رو نصب کرده باشیم تا بتونیم ابتدا یک پروژه ری اکتی بسازیم ( ما فرض میکنیم که Node و NPM رو روی سیستم خودمون نصب کردیم )

حالا وارد یک Code Editor مثل VS Code میشیم و توی ترمینال دستور زیر رو وارد میکنیم :

				
					$ npm init -y

با انجام دستور بالا یک فایل package.json برای ما ایجاد میشه. حالا باید یک پروژه ری اکتی بسازیم. با دستور زیر ری اکت و پیش نیاز های ری اکت برای ما نصب میشن :

				
					npm i react react-dom --save

حالا ما باید Webpack رو نصب کنیم + پیش نیاز هایی که از وب پک لازم داریم:

				
					 npm i webpack webpack-dev-server webpack-cli --save--dev

انتهای دستور بالا از dev استفاده کردیم، یعنی به ری اکت اطلاع دادیم که این dependencies فقط در زمان توسعه ( development ) استفاده بشه.

حالا که webpack و ری اکت برای ما نصب شدن، میتونیم بریم سراع اعمال کانفیگ و تنظیمات وب پک در ریکت.

ساختار فایل های پروژه ما باید بصورت زیر باشه :

فایل index.html ما بصورت زیر هست :

				
					<!DOCTYPE html>
<html>
  <head>
      <title> سلاام - FrontEndi.com </title>
  </head>
  <body>
      <div id="app"></div> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://frontendi.com/wp-content/litespeed/js/60b5079420c218aead09c4aaef14f1e1.js?ver=aabdc"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>

و فایل index.js ما بصورت زیر :

				
					import React from "react";
import ReactDOM from "react-dom";
import App from "./App"; ReactDOM.render(<App />, document.getElementById("app"));

...
import React from "react";

export default function App() {
return <h1> سلام 🙂 </h1>;
}

اپیکیشن ما صرفا یک متن ساده در مرورگر نمایش میده اما این برای تست عملکرد وب پک در ری اکت کافیه 🙂

تنظیم Loaders در اپیکیشن ری اکتی :

تو این مقاله درمورد اهمیت Loaders در وب پک صحبت کردیم و گفتیم که Loaders های خیلی زیادی وجود داره مثل babel-loader که برای تبدیل JSX به جاوااسکریپت کاربرد داره.

برای استفاده از babel-loader میتونیم از دستور زیر استفاده کنیم:

				
					npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

حالا باید به وب پک بگیم که از Babel برای باندل کردن استفاده کن:

				
					const path = require("path");
module.exports = {
  entry: "/src/index.js",
  output: { path: path.resolve(__dirname, "dist") },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },
};

باندل کردن اپیکیشن ری اکتی :

ما به کمک یک دستور میتونیم اپیکیشن ری اکتی خودمون رو به کمک Webpack باندل کنیم اما بهتره که این دستور رو دستی وارد نکنیم. ما میخوایم این دستور همیشه در زمان Build اپیکیشن اجرا بشه. پس به فایل package.json میریم و در بخش اسکریپت دستور webpack رو قرار میدیم :

				
					{
	  "name": "tutorial-react-webpack",
	  "version": "1.0.0",
	  "description": "Configuring webpack for React",
	  "main": "index.js",
	  "scripts": {
	    "build": "webpack"
	  },
	  "keywords": [],
	  "author": "",
	  "license": "ISC",
	  "dependencies": {
	    "react": "^17.0.2",
	    "react-dom": "^17.0.2"
	  },
	  "devDependencies": {
	    "@babel/core": "^7.13.16",
	    "@babel/preset-env": "^7.13.15",
	    "@babel/preset-react": "^7.13.13",
	    "babel-loader": "^8.2.2",
	    "webpack": "^5.35.1",
	    "webpack-cli": "^4.6.0"
	  }

}

حالا اگه دستور npm run build رو در ترمینال وارد کنیم، پروژه ما به کمک webpack بیلد میشه و خروجی که یک فایل با نام main.js در پوشه dist هست ایجاد میشه.

حالا باید این فایل main.js که باندل وب پک ما هست رو به فایل index.html ضمیمه کنیم تا برای کاربر دانلود بشه.

پس به فایل index.html میریم و این اسکریپت رو بهش اضافه میکنیم:

				
					<!DOCTYPE html>
<html>
  <head>
    <title>React with Webpack</title>
  </head>

  <body>
    <div id="app"></div> <script src="../dist/main.js" defer></script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" type="litespeed/javascript" data-src="https://frontendi.com/wp-content/litespeed/js/60b5079420c218aead09c4aaef14f1e1.js?ver=aabdc"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>

با انجام اینکار، اپیکیشن ما در مرورگر نمایش داده میشه 🙂

البته ما اینکار رو بصورت دستی انجام دادیم.

پلاگین HtmlWebpackPlugin :

کاری که ما بالاتر انجام دادیم ( رفتیم سراغ فایل html و آدرس فایل main.js رو دستی بصورت اسکریپت داخلش قرار دادیم ) خیلی مسخره و خسته کنندس!

ما نمیخوایم اینکار رو بصورت دستی انجام بدیم و میخوایم هر اسکریپت بصورت خودکار داخل فایل html ما قرار بگیره.

برای اینکار باید از افزونه HtmlWebpackPlugin استفاده کنیم، پس دستور زیر رو برای نصب این پلاگین در ترمینال وارد میکنیم:

				
					npm i -D HTML-webpack-plugin

پس از نصب این پلاگین، باید به فایل تنظیمات وب پک در ری اکت بریم و این پلاگین رو در بخش plugins اضافه کنیم:

				
					const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "/src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
};

پس از نصب این پلاگین، فایل اسکریپت بصورت خودکار داخل فایل index.html لینک میشه و دیگه نیازی نیست بصورت دستی این کار رو انجام بدیم.

استفاده از webpack در react ضروریه ؟

وب پک یک ماژول باندلر ( module bundler ) برای اپیکیشن های جاوااسکریپتی به حساب میاد و مزایا و معایب خاص خودش رو داره.

وب پک برای باندل کردن ( بسته بندی ) و بهینه سازی فایلهای پروژه ما خیلی مفیده.

در جریان باشیم که هیچ اجباری برای استفاده از webpack در react وجود نداره و ما میتونیم از ابزار های مشابه دیگه ای مثل Browserify، Brunch یا Parsel هم بهره ببریم.

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

مرورگر ها درکی از کد های JSX یا ES ندارن !

ما میدونیم که مرورگر ها هیچ درک و فهمی از کدهای JSX یا ES که در ری اکت مینویسیم، ندارن! این وب پک هست که کد های JSX و ES رو به جاوااسکریپت ترجمه میکنه و به مرورگر ها کمک میکنه کد های ما رو متوجه بشن. ( به کمک Babel )

مزایای webpack در ری اکت چیست ؟

توسعه اپیکیشن های SPA ( تک صفحه ای ) رو راحت میکنه.
تمام فایلهای پروژه مارو به یک فایل واحد باندل میکنه ( هرچی html,css,js,image,font داریم به یک فایل تبدیل میکنه تا مرورگر با یک درخواست کل موارد مورد نیاز رو دریافت کنه )
وب پک در ری اکت کد های بلااستفاده رو حذف میکنه و حتی کدهای مارو بهینه میکنه تا حجم نهایی فایل bundle.js کم بشه. ( باعث میشه سرعت لود سایت بهینه بشه )
وب پک در react یک عالمه پلاگین و ابزار داره که هرکدوم کلی مزیت به اپیکیشن ری اکتی ما اضافه میکنن.
از import و require توی کد پشتیبانی میکنه.
webpack در ری اکت کدهای مارو به فایلهای جداگانه تقسیم میکنه و این باعث میشه هر کاربر فقط تیکه کد مورد نیاز خودش رو دانلود کنه ( نه کد هایی که بهش نیاز نداره )
وب پک جامعه آماری خیلی بزرگی داره و تقریبا به هر مشکلی بر بخوریم، راه حلش از قبل مشخص شده.
webpack سازگاری خیلی خوبی با کتابخانه ها و فریمورک های جاوااسکریپتی مثل React، Vue و Angular داره.
ویژگی Hot Reload رو فعال میکنه.
محبوب ترین ابزار ساخت ( Build ) به حساب میاد.

معایب webpack در ری اکت چیست ؟

از مهمترین معایب وب پک میشه به موارد زیر اشاره کرد؟

وب پک تنظیمات و کانفیگ سختی داره ( البته میتونیم از کانفیگ های آماده استفاده کنیم )
یادگیری وب پک خیلی پیچیدس و منابع آموزشی خوبی نداره ( مخصوصا برای تازه وارد ها )
وب پک برای پروژه های کوچیک و متوسط عالی عمل میکنه اما برای پروژه های خیلی بزرگ، زمان Build رو خیلی افزایش میده.
ارور های وب پک واضح نیستن و خیلی گیج کننده هستن!
یکسره آپدیت میده و این کمی اذیت کننده و گیج کنندس!

وب پک یا vite ؟

به عنوان یک Front-End Developer باید یک ابزار ساخت خوب و مناسب برای توسعه اپیکیشن های تحت وب خودمون انتخاب کنیم.

ابزار Vite و Webpack اهداف مشابهی دارن.

ما تو مقاله ابزار Vite حسابی این ابزار قدرتمند رو بررسی کردیم ( اگه با Vite آشنا نیستید، مقاله رو مطالعه کنید )

اما اگه بخوایم بین این 2 ابزار یکی رو انتخاب کنیم، کدوم بهتره ؟

صادقانه اگه بخوایم بین Vite و Webpack یکی رو انتخاب کنیم، باید به نیاز پروژه خودمون نگاه کنیم چون این 2 ابزار امکانات مشابهی دارن.

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

بطور کل ابزار Vite نسبت به Webpack این مزیت هارو داره :

برای پروژه های جدید بهتره.
سرعتش خیلی بیشتره.
یادگیری و پیکربندیش خیلی آسونه.
از Rollup استفاده میکنه که باعث شده خروجی اپیکیشن خیلی بهینه باشه.

و webpack نسبت به Vite این مزیت هارو داره :

جامعه آماری خیلی بزرگی داره.
تنظیمات پیچیده برای نیاز های پیچیده داره.
پلاگین و Loaders های خیلی زیادی داره.

جمع بندی

ما تو این مقاله webpack در ری اکت رو بررسی کردیم و دیدیم که چه مزایا و معایبی داره و چطور میشه از وب پک در ری اکت استفاده کرد 🙂

همچنین درمورد پلاگین ها و ویژگی های اصلی webpack و مقایسه وب پک با vite صحبت کردیم.

با توجه به مزایای خیلی خیلی زیادی که webpack داره پیشنهاد میکنم از webpack یا Vite در ری اکت استفاده کنید.

وب پک ( webpack ) چیست ؟

وب پک یک ماژول باندلر ( module bundler ) برای اپیکیشن های پیشرفته جاوااسکریپتی به حساب میاد که وظیفه مدیریت assets های پروژه ( فایلهای js,css,html,images,font و .. رو به عهده داره ) همچنین به بهینه تر شدن پروژه کمک میکنه و با مزایای خودش باعث شده فرآیند توسعه اپیکیشن ساده تر باشه.

وب پک بهتره یا Vite ؟

هرکدوم مزایا و معایب خاص خودشون رو دارن.

ابزار Vite نسبت به Webpack این مزیت هارو داره :

برای پروژه های جدید بهتره.
سرعتش خیلی بیشتره.
یادگیری و پیکربندیش خیلی آسونه.
از Rollup استفاده میکنه که باعث شده خروجی اپیکیشن خیلی بهینه باشه.

webpack نسبت به Vite این مزیت هارو داره :

جامعه آماری خیلی بزرگی داره.
تنظیمات پیچیده برای نیاز های پیچیده داره.
پلاگین و Loaders های خیلی زیادی داره.

وبلاگ

وب پک ( webpack ) در ری اکت چیست ؟ webpack در react چه کاربردی داره ؟

وب پک ( webpack ) چیست ؟

وب پک چیکار میکنه ؟

وب پک در ری اکت شامل چه مواردی میشه ؟

مفهوم Loaders در وب پک

مفهوم Dev Server در وب پک

مفهوم Plugins در وب پک

مفهوم Entry در وب پک

مفهوم Output در وب پک

Entry در وب پک چیست ؟

Output در وب پک چیست ؟

Loaders در وب پک چیست ؟

Dev Server در وب پک چیست ؟

Plugins در وب پک چیست ؟

وب پک در ری اکت چطور کار میکنه ؟

نصب webpack در ری اکت

تنظیم Loaders در اپیکیشن ری اکتی :

باندل کردن اپیکیشن ری اکتی :

پلاگین HtmlWebpackPlugin :

استفاده از webpack در react ضروریه ؟

مرورگر ها درکی از کد های JSX یا ES ندارن !

مزایای webpack در ری اکت چیست ؟

معایب webpack در ری اکت چیست ؟

وب پک یا vite ؟

بطور کل ابزار Vite نسبت به Webpack این مزیت هارو داره :

و webpack نسبت به Vite این مزیت هارو داره :

جمع بندی

ابزار Vite نسبت به Webpack این مزیت هارو داره :

webpack نسبت به Vite این مزیت هارو داره :

درباره احمد احمدنژاد

دیدگاهتان را بنویسید لغو پاسخ

صفحات فِرانت اِندی

تماس با ما

شبکه های اجتماعی