وب پک ( 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 در زمان توسعه اپیکیشن و پروژه در اختیار ما میزاره
• کد های بلااستفاده پروژه رو حذف میکنه

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

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

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

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

1. مفهوم Loaders در وب پک
   
2. مفهوم Dev Server در وب پک
   
3. مفهوم Plugins در وب پک
   
4. مفهوم Entry در وب پک
   
5. مفهوم Output در وب پک
   

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

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

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

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

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

module.exports =

{

   entry: &quot./src/index.js&quot

}

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

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

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

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

module.exports = {

    entry: &quot./src/index.js&quot

    output: {

        path: &quotIdist/assets&quot,

        filename: &quotbundle.js&quot,

        publicPath: &quotassets&quot

    }

}

مفهوم 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 ، روش کار کردن وب پک، آموزش نصب webpack ، مفهوم لودر، باندل و پلاگین های معروف وب پک مثل HtmlWebpackPlugin صحبت کنیم :)

لطفا برای مطالعه ادامه این مقاله بصورت کامل و رایگان روی لینک زیر کلیک کنید :

وب پک در react