علی کمیجانی
علی کمیجانی
خواندن ۴ دقیقه·۳ سال پیش

وب پک چیست و چرا باید از آن استفاده کنیم (قسمت سوم)

خب تو دوتا قسمت قبلی یاد گرفتیم وب پک چیه و چطور باید وب پک رو راه بندازیم و براش فایل کانفیگ نوشتیم تو این قسمت میخوایم یاد بگیریم چجوری فایل های css و media و ... رو مدیریت کنیم.

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

وب پک چیست و چرا باید از آن استفاده کنیم (قسمت اول)<br/>وب پک چیست و چرا باید از آن استفاده کنیم (قسمت دوم)

خب اگه پروژه قبلی رو دارید تغییرات زیر رو توش انجام بدید و اگه ندارید هم مشکلی نیست یه پروژه با نود ایجاد کنید یه پوشه بسازید به نام dist و توش یه فایل با نام index.html بسازید

dist/index.html

<!DOCTYPE html>
 <html>
   <head>
     <meta charset=&quotutf-8&quot />
     <title>Asset Management</title>
   </head>
   <body>
     <script src=&quotbundle.js&quot>
   </body>
 </html>

خب داخل روت پروژه فایل کانفیگ رو بسازید

webpack.config.js

const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
+    filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

برای استفاده از css توی ماژول های js احتیاج داریم تا دو تا کتابخونه style-loader و css-loader رو نصب کنیم و فایل کانفیگ رو کمی کنیم.

npm install --save-dev style-loader css-loader

webpack.config.js

const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
 };

خب بریم سراغ توضیحات ما از ویژگی ماژول لودر وب پک داریم استفاده میکنیم این ویژگی به این نحوه که میاد یه سری rule رو روی فایل ها تست میکنه اگه مثبت بود اون فایل ها رو پاس میده به کتابخونه هایی که ما تو قسمت use نوشتیم و خروجی اونها رو میریزه تو پوشه dist.

اگه به قسمت test نگاه کنید با کمی دقت متوجه میشید که در واقع یه الگوی رجکس نوشته شده رجکس یه کتابخونه برای پردازش متن هست و تو این مثال ما داریم میگیم هر فایلی که آخرش پسوند .css رو داشت پاس بده به style-loader و بعدش خروجی رو پاس بده به css-loader و بعد اون کارت تمومه. در واقع ما برای هر تیپ فایل باید یه رول خاص بنویسیم (البته اگه قراره دستکاریش کنیم).

بریم که یکم استایل به پروژه بدیم برید داخل پوشه src یه فایل index.js بسازید و یه فایل style.css

src/style.css

.hello {
  color: red;
}

src/index.js

 import './style.css';

 function component() {
   const element = document.createElement('div');
   element('hello word')
   element.classList.add('hello');
   return element;
 }
 document.body(component());

حالا npx run build رو بزنید و نتیجه زیبا که نوشته hello word با فونت قرمز هست رو ببینید:) نکته جالب اینکه اگه شما view page source رو بزنید هیچ استایلی رو نباید ببینید چون این استایل و محتویات به صورت داینامیک با جاوا اسکریپت به کد شما اضافه شده.

مدیریت فونت و عکس

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

webpack.config.js

const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
     rules: [
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: 'asset/resource',
+      },
     ],
   },
 };

رول اول برای عکس ها و رول دوم برای فونت هاست حالا کافیه توی پوشه src عکس ها و فونت ها رو بزارید و آدرس رو بصورت نسبی توی فایل های css یا js وارد کنید بعد بیلد کردن خود وب پک اون عکس ها و فونت ها رو میبره تو پوشه dist/asset/resource و آدرسش رو هم توی فایل ه جاوا درست میکنه

src/style.css

+@font-face {
+  font-family: 'MyFont';
+  src: url('./my-font.woff2') format('woff2'),
+    url('./my-font.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+}
+
 .hello {
   color: red;
+  font-family: 'MyFont';
   background: url('./background.png');
 }

به جای my-font اسم فونت خودتون رو بدید و اسم عکس هم که مشخصه دوباره پروژه رو اجرا کنید و از خروجی جدید لذت ببرید.

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

webpacknodejsnode
علی کمیجانی
علی کمیجانی
از دوران راهنمایی که اولین کامپیوتر رو دیدم همیشه کنجکاو بودم که چجوری نرم افزارها درست میشن...آخرش برنامه نویس شدم:)
شاید از این پست‌ها خوشتان بیاید