خواندن ۴ دقیقه·۴ سال پیش

وب پک ۵ - قسمت دوم

ساخت ساده‌ترین پروژه وب پکی ?

یک فولدر بسازید و توی فولدر ترمینال رو باز کنید و بنویسید

npm init -y

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

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

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

پس یک فولدر و داخل اون یک فایل html با نام Index بسازید و اگر از VSCode استفاده میکنید یک علامت تعجب ! بنویسید و Enter رو بزنید تا براتون محتوای خام یک فایل html رو ایجاد کنه (بهش میگیم Boilerplate) اگر ندارید تگ‌های زیر رو کپی کنید توی فایل index.html

<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
    <meta charset=&quotUTF-8&quot>
    <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot>     
    <title>Document</title>
</head>
<body>
</body>
</html>

حالا کنار فایل index یک پوشه بسازید به نام src و داخلش یک فایل جاوااسکریپت با نام index.js بسازید و یک رفرنس به این فایل توی فایل html ایجاد کنید، همچنین یک رفرنس به لایبراری lodash با استفاده از CDN آنپکیج (unpkg) میدیم چون میخوایم از این لایبراری توی فایل Index.js استفاده کنیم.

در این مرحله فایل index.html شما باید به شکل زیر باشه:

https://gist.github.com/3dln/efef83e35744b10048824c5154e22a85#file-index-html

حالا فایل index.js رو به شکل زیر می نویسیم:

https://gist.github.com/3dln/4e6135f204a6a559e8b64d9cfa1ec341#file-index-js

یه توضیح سریع هم راجع به محتوای فایل میدم:

خط هشتم به body خروجی فانکشن component رو اصطلاحا append کردیم پس انتظار میره که این فانکشن به ما یک المان html خروجی بده.
داخل فانکشن component همونطور که میبینید با دستور createElement یک div ساختیم و توی خط ۳ محتوای این div رو با استفاده از لایبراری lodash که توی فایل index.html لود کرده بودیم تعریف کردیم اون علامت آندرسکور (_) برای lodash مثل $ برای jquery می‌مونه و دستور join هم داره Hello و Webpack رو از آرایه‌ای که بهش داده شده میگیره و بهمون یک استرینگ برمیگردونه و از space هم برای متصل کردن این دو رشته استفاده میکنه.

خوب حالا اگر فایل index.html رو باز کنید یک صفحه سفید میبینید با عبارت Hello Webpack
حالا بیاید همین پروژه رو وب پکی کنیم ?
اولین قدم اینه که ساختار پروژه رو کمی تغییر بدیم... ما میخوایم که یک فولدر حاوی سورس‌کدها داشته باشیم که همون فولدر/src مون هست و یک فولدر برای خروجی‌ای که وب پک بهمون میده که آپتیمایز و مینیفای شده ست به نام /dist (مخفف distribution) برای استفاده از قابلیت‌های task running وب پک. پس یک فولدر به نام /dist بسازید و فایل index.html رو داخلش کپی کنید.

دومین قدم اینه که بدونیم برای استفاده از قدرت باندلینگ وب پک ما باید لایبراری‌هایی که استفاده میکنیم رو لوکال داشته باشیم پس با دستور زیر lodash رو بصورت لوکال نصب کنید و لینک رفرنسش رو از index.html بردارید.

npm i lodash

اگر خاطرتون باشه قبلا موقع نصب پکیج‌های npm از سویچ‌ --save استفاده میکردیم نسخه جدید npm به ما این امکان رو میده که بدون این سویچ‌ نصب رو انجام بدیم و بصورت پیشفرض --save در نظر میگیره ولی اگر --save-dev مد نظرتون هست باید سویچ رو بنویسید

حالا lodash رو به شکل زیر توی فایل index.js ایمپورت کنید

import _ from 'lodash'

دقت کنید که در حال حاضر index.html داره فایل index.js رو از مسیر /src میخونه، رفرنس به اسکریپت رو به شکل زیر تغییر بدید:

<script src=&quotmain.js&quot>

اینکه چرا اسم فایل رو به main تغییر دادیم کمی جلوتر متوجه میشید، فعلا فقط این مسیر رو بنویسید ولی اسم فایل اصلی index.js که توی پوشه /src هست رو تغییر ندید.

حالا وب پک رو نصب کنیم

npm i webpack webpack-cli --save-dev

دقت کنید که ما ۲ تا لایبراری نصب کردیم اولی یعنی webpack هسته اصلی وب پک هست و همه چیز وابسته به نصب بودنشه و دومی یعنی webpack-cli برای اجرای دستورات وب پک از طریق ترمینال بهش نیاز داریم و حالا دقت کنید که از سویچ --save-dev برای نصب این دو استفاده کردیم و واضحه که چرا... اصولا وب پک یک لایبراریه که فقط زمان دولوپمنت به کار ما میاد و در فاز پروداکشن اصلا از وب پک استفاده نمیشه در واقع وب پک در حین عبور از فاز دولوپمنت به پروداکشن به کمک ما میاد تا فایل‌هامون رو باندل کنیم و یک سری بارها رو از روی دوشمون برمیداره.

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

&quotscripts&quot: {
    &quotstart&quot: &quotwebpack&quot
},

حالا خروجی زحمتتاتون رو با دستور زیر ببینید

npm start

اگر همه قدم‌ها رو درست برداشته باشید باید یک فایل main.js توی پوشه dist براتوی ایجاد شده باشه (به همراه یک فایل txt که لایسنس lodash هست) و اگر فایل index.html رو اجرا کنید باید عبارت Hello Webpack براتون به نمایش در بیاد. اینجا مشخص شد چرا ما مسیر فایل رو به نام main.js تغییر داده بودیم چون وب پک به صورت پیش فرض این اسم رو برای باندلی که ساخته انتخاب میکنه، همچنین اگر این فایل رو باز کنید میبینید که کل لایبراری lodash و فایل شما توی این فایل باندل شده ند و فایل کاملا ناخواناست.

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

مثل همیشه کل این آموزش روی گیت‌هاب قرار داده شده و شما میتونید فایل‌های مربوط به هر مرحله رو روی branchهای مختلف ببینید.

با اضافه شدن هر آموزش فایل‌های مربوطه به برنچ‌های جدید اضافه میشوند

ممنون از اینکه همراهی کردید... برنامه نویس موفقی باشید.

webpack وب پک web pack webpack 5 وب پک ۵

اشکان

فول ستک اگه آدمیزاد بود

شاید از این پست‌ها خوشتان بیاید