ان دنوں میں جب جاوا اسکرپٹ میں ماڈیولریٹی متعارف کرائی گئی تھی، ویب براؤزرز میں ماڈیولز کو سپورٹ کرنے کا کوئی طریقہ نہیں تھا۔ اس مسئلے کو حل کرنے کے لیے، ماڈیول بنڈلرز جیسے پارسل، ویب پیک، اور رول اپ تیار کیے گئے تھے۔ ان سے متعدد ماڈیولز کو پروڈکشن کے لیے تیار بنڈل میں بہتر بنانے میں مدد ملی، جسے براؤزرز کے ذریعے عمل میں لایا جا سکتا ہے۔
آج، جب ماڈیول بنڈلنگ کے ماحولیاتی نظام کی بات آتی ہے، تو وہ ٹول جو سب کے ہونٹوں پر سب سے زیادہ رہتا ہے Webpack ہے۔
میرے لیے، ویب پیک سے نمٹنے کے لیے کافی خوفناک ہوتا تھا، میں اس کے بجائے ٹولز کی طرف بھاگوں گا۔ vue-create اگر مجھے Vue پروجیکٹ ترتیب دینے کی ضرورت ہو یا create-react-app ایک React ایپ قائم کرنے کے لیے، صرف ان تمام پیچیدگیوں سے بچنے کے لیے جو میں نے ویب پیک کے ساتھ کام کرتے ہوئے محسوس کی تھیں۔
اگر آپ بالکل ویسے ہی ہیں جیسے میں ہوا کرتا تھا، یعنی آپ کو لگتا ہے کہ بابل، SASS، Vue، یا TypeScript کے ساتھ شروع سے ویب پیک ترتیب دینا، کافی مبہم ہوسکتا ہے، تو یہ گائیڈ آپ کے لیے ہے!
اس گائیڈ میں، آپ سیکھیں گے کہ Webpack کا استعمال کرتے ہوئے فرنٹ اینڈ ماحول کیسے بنایا جائے، اور زندگی کی تمام چیزوں کی طرح، جس لمحے آپ اپنے آپ کو سیکھنے کا موقع دیں گے اور کسی تصور کو اچھی طرح سے سمجھنے کو یقینی بنائیں گے، آپ کو احساس ہو جائے گا کہ یہ زیادہ خوفناک نہیں ہے۔ سب کے بعد
اس میں بہت سارے متحرک حصوں کے ساتھ، ہم آپ کو ویب پیک سے واقف کرانے کے لیے مختلف بنیادی تصورات سیکھیں گے اور ایک ویب پیک بوائلر پلیٹ بنائیں گے تاکہ آپ کو بڑے پیمانے پر مقبول ماڈیول بنڈلر کے ساتھ شروع سے کسی بھی پروجیکٹ کو ترتیب دیتے وقت اٹھنے اور چلانے میں مدد ملے۔
Webpack کیا ہے؟
اس سے قطع نظر کہ ویب پیک کتنا ہی پیچیدہ ہو سکتا ہے، اس کا بنیادی مقصد بہت سیدھا رہتا ہے۔ یہ مختلف اثاثوں، مختلف فائلوں کا ایک گروپ لیتا ہے - مختلف اقسام کی؛ جاوا اسکرپٹ، امیجز، ایس اے ایس ایس، پوسٹ سی ایس ایس، جو بھی فائل ہو، اور یہ ان کو مکمل طور پر جوڑ کر فائلوں کے ایک چھوٹے گروپ میں بناتا ہے، شاید ایک فائل، یا یہ آپ کے جاوا اسکرپٹ کے لیے ایک فائل، اسٹائل شیٹس کے لیے ایک فائل، ایک فریق ثالث جاوا اسکرپٹ کے لیے، اور ایک انڈیکس JavaScript فائل کے لیے۔
یہ بہت قابل ترتیب ہے، اور یہ وہ جگہ ہے جہاں یہ ان لوگوں کے لیے قدرے تکلیف دہ ثابت ہوتا ہے جو اس میں نئے ہیں، تاہم، اس کے پیچھے کا خیال بہت آسان ہے۔ چیزوں کو اکٹھا کرنے کے علاوہ، یہ کسی ایپلیکیشن کے انحصار کا بھی انتظام کرتا ہے، اس طرح، اس بات کو یقینی بناتا ہے کہ جن کوڈز کو پہلے لوڈ کرنے کی ضرورت ہے - پہلے لوڈ کریں، اسی طرح، اگر مثال کے طور پر، آپ ایک فائل لکھتے ہیں جو دو دیگر فائلوں پر منحصر ہے۔ ، اس کا مطلب ہے کہ ان دو دیگر فائلوں کو پہلے لوڈ کرنے کی ضرورت ہے۔
اس کے مطابق سرکاری GitHub صفحہ:
"جاوا اسکرپٹ اور دوستوں کے لیے ایک بنڈلر۔ بہت سے ماڈیولز کو چند بنڈل اثاثوں میں پیک کرتا ہے۔ کوڈ اسپلٹنگ درخواست کے پرزہ جات کو ڈیمانڈ پر لوڈ کرنے کی اجازت دیتا ہے۔ "لوڈرز" کے ذریعے، ماڈیولز CommonJs، AMD، ES6 ماڈیولز، CSS، امیجز، JSON، Coffeescript، LESS، … اور آپ کی حسب ضرورت چیزیں ہو سکتی ہیں۔
Webpack میں بہت کچھ ہے، اور اس گائیڈ میں اس مقام پر، ہم ویب پیک کے بنیادی تصورات سے واقفیت حاصل کرنے والے ہیں۔
پروجیکٹ سیٹ اپ
اس ٹیوٹوریل کے لیے اپنی ترجیحی ڈائرکٹری میں، ایک نیا فولڈر بنائیں: webpack-app، ویب پیک پروجیکٹ کی رہائش کے لیے۔
$ mkdir webpack-app
اس کے بعد، آئیے پروجیکٹ فولڈر میں Node.js کو پروجیکٹ ڈائرکٹری سے ٹرمینل میں درج ذیل کمانڈز چلا کر شروع کریں۔
$ cd webpack-app
$ npm init --yes
یہ ایک پیدا کرے گا package.json فائل جو ایپلیکیشن انحصار کو ٹریک کرنا ممکن اور آسان بناتی ہے۔
اب جب کہ ہمارے پروجیکٹ میں نوڈ کو شروع کیا گیا ہے، ہم ان مختلف پیکجوں کو انسٹال کرنا شروع کر سکتے ہیں جن کی ہمیں ضرورت ہوگی۔ آگے بڑھنے کے لیے، آئیے ہم بنیادی پیکجوں کو انسٹال کریں: webpack اور webpack-cli.
$ yarn add --dev webpack webpack-cli
# Or
$ npm install --save-dev webpack webpack-cli
۔ webpack پیکیج ہمیں براؤزر میں استعمال کے لیے بنڈل جاوا اسکرپٹ ماڈیول تیار کرنے کی اجازت دے گا، جبکہ webpack-cli ایک ایسا ٹول ہے جو کمانڈز کا ایک سیٹ فراہم کرتا ہے جو ڈویلپرز کے لیے اپنی مرضی کے مطابق ویب پیک پروجیکٹ کو تیزی سے ترتیب دینا آسان بناتا ہے۔
شروع کرنے کے لیے، آئیے روٹ ڈائرکٹری میں دو نئے فولڈر بنائیں src اور dist. میں src فولڈر، ایک بنائیں index.js فائل جو ہماری درخواست کے لیے روٹ فائل کے طور پر کام کرے گی۔
نوٹ: باکس سے باہر، ویب پیک کو کنفگ فائل کی ضرورت نہیں ہے۔ یہ خود بخود فرض کر لیتا ہے کہ کسی پروجیکٹ کا انٹری پوائنٹ ہے۔ src/index.js اور یہ پیداوار کے لیے ایک چھوٹا اور بہتر نتیجہ نکالے گا۔ dst/main.js فائل.
پروجیکٹ کو ترتیب دینا
اگلا، ہماری پروجیکٹ ڈائرکٹری کے روٹ میں، آئیے کنفیگریشن فائل سیٹ اپ کریں۔ webpack.config.js اس بات کی وضاحت کرنے کے لیے کہ پروجیکٹ کے اندر بنڈلنگ کی شکل کیسے اختیار کرنی چاہیے:
$ touch webpack.config.js
موڈ
موڈ ماحول کی وضاحت کرتا ہے جہاں پروجیکٹ فی الحال کام کرتا ہے۔ اس کی پراپرٹی کا ڈیفالٹ ہے۔ none، لیکن دونوں میں سے ایک پر سیٹ کیا جا سکتا ہے۔ production or development، لیکن آپ حقیقت میں کبھی استعمال نہیں کریں گے۔ none ایک موڈ کے طور پر. درحقیقت، جب موڈ غیر سیٹ رہتا ہے تو کیا ہوتا ہے، ویب پیک استعمال کرتا ہے۔ production اصلاح کے لیے فال بیک آپشن کے طور پر۔
ساتھ development موڈ کے طور پر سیٹ کرتے ہیں، ہم آسانی سے سورس میپنگ کا استعمال کرتے ہوئے غلطیوں کی نشاندہی کرتے ہیں اور یہ جانتے ہیں کہ اصل فائلیں کہاں تھیں۔
ساتھ production موڈ کے طور پر سیٹ کریں، ترجیح فائلوں کو سکڑنا، بہتر بنانا اور چھوٹا کرنا ہے:
const path = require("path");
module.exports = {
mode: "development",
};
انٹری
سیٹ کرنے کے لیے ایک اور کنفیگریشن انٹری آبجیکٹ ہے۔ یہ اس بات کی وضاحت کرتا ہے کہ ہم کس فائل سے چاہتے ہیں کہ ہمارا ویب پیک اپنا ایپلیکیشن بنڈل بنانا شروع کرے۔ اگر یہ سنگل پیج ایپلی کیشن ہے، تو اس میں ایک انٹری پوائنٹ ہونا چاہیے، جب کہ اگر یہ ایک ملٹی پیج ایپلی کیشن ہے، تو اس میں متعدد انٹری پوائنٹس ہونے چاہئیں۔
بلاشبہ، سنگل پیج ایپلی کیشن میں، یہ انڈیکس جاوا اسکرپٹ فائل کے اندر ہوگی۔ src فولڈر، اور ہمارے معاملے میں، یہ ہے src/index.js فائل:
const path = require("path");
module.exports = {
entry: {
main: path.resolve(__dirname, "src/index.js"),
},
};
آؤٹ پٹ
آخر میں، ایک آغاز کے لیے، ہمیں یہ اعلان کرنے کے لیے ایک آؤٹ پٹ کی بھی ضرورت ہو گی کہ ہم ایپلیکیشن بنڈلنگ کے عمل کے مکمل ہونے کے بعد فائلوں، اثاثوں، بنڈلوں، اور ایپلیکیشن کے دیگر وسائل کو کہاں سے آؤٹ پٹ کرنا چاہتے ہیں۔ ہمارے معاملے میں، ہم نے سیٹ کیا path آؤٹ پٹ ہونے کے لیے dist فولڈر، لیکن اگر آپ چاہیں تو اس کا نام بدل سکتے ہیں، شاید deploy, build، یا آپ جو بھی نام پسند کرتے ہیں۔
ہمیں بھی سیٹ کرنے کی ضرورت ہے۔ filename آؤٹ پٹ بنڈل کے نام کی وضاحت کرنے کے لیے۔ ایک عام نام کنونشن ہے۔ [name].bundle.js:
const path = require("path");
module.exports = {
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.bundle.js",
filename: "[name].bundle.js",
},
};
اب ہم نے ایک ایپلیکیشن کو بنڈل کرنے کے لیے درکار کم از کم کنفیگریشن ترتیب دی ہے، جسے ہم چلا سکتے ہیں۔ package.json
اس کو حاصل کرنے کے لیے، ہمیں پہلے سے طے شدہ اسکرپٹ آبجیکٹ کو اپ ڈیٹ کرنے کی ضرورت ہے۔ package.json. آئیے ایک نئی کمانڈ بنائیں جس کا نام ہے۔ build، جو ہوگا webpack اس کی قیمت کے طور پر. اس کمانڈ کو محفوظ کرنے کے ساتھ، اب ہم ویب پیک چلا سکتے ہیں۔
لیکن اس سے پہلے کہ ہم چلائیں۔ build کمانڈ، آئیے جلدی سے جاوا اسکرپٹ کوڈ کی چند لائنیں شامل کریں۔ src/index.js فائل:
console.log("Hello world! My name is Uche Azubuko.");
اگلا، ہم ٹرمینل سے درج ذیل کمانڈ کے ساتھ ویب پیک چلاتے ہیں:
$ yarn build
#
$ npm run build
یہ نتائج:
$ webpack
asset main.bundle.js 1.24 KiB [emitted] (name: main)
./src/index.js 54 bytes [built] [code generated]
webpack 5.75.0 compiled successfully in 98 ms
Done in 0.94s.
بنیادی طور پر، جب ہم چلاتے ہیں۔ build کمانڈ، webpack وہ کمانڈ ہے جو ہڈ کے نیچے چلائی جاتی ہے۔ کنفیگریشن سیٹنگز جو ہم نے بیان کی ہیں پڑھی جائیں گی اور انٹری پوائنٹ، یعنی app.js بنڈل ہو جاتا ہے، پڑھنے کے ذریعے، اور آؤٹ پٹ کے طور پر main.bundle.js میں dist فولڈر.
اگر ہم مختلف پوائنٹس بناتے رہتے ہیں تو ہمیں مختلف نام ملیں گے، لیکن اگر ہم سیٹ کریں۔ filename کرنے کے لئے [name].[contenthash].jsہر بار جب ہمارا ایپلیکیشن بنڈل مکمل ہو جائے گا، تو ہم تعمیل شدہ فائل کے لیے ایک منفرد نام حاصل کرنا یقینی بنائیں گے۔
اب، جب ہم دوبارہ ایپ بناتے ہیں، تو ہمیں فائل کے لیے ایک انوکھا نام ملتا ہے جو کہ میں آؤٹ پٹ ہوتا ہے۔ dist فولڈر، جیسے main.96f31f8d4c5ec9be4552.js:
$ yarn build
# Or
$ npm run build
یہ نتائج:
$ webpack
asset main.96f31f8d4c5ec9be4552.js 1.24 KiB [emitted] [immutable] (name: main)
./src/index.js 54 bytes [built] [code generated]
webpack 5.75.0 compiled successfully in 88 ms
Done in 0.92s.
اس طرح، براؤزر ہر تعمیراتی وقت کے لیے ایپلیکیشن کے وسائل کو کیش کرنے کے قابل ہوتا ہے، کیونکہ ہر بار جب ایپ بنائی جاتی ہے تو منفرد نام ہوتے ہیں (ہر بلڈ فائل کے لیے ورژن مینجمنٹ کی طرح)۔
اس سے ویب ایپلیکیشنز اور ویب سائٹس کے لیے تیزی سے لوڈ ٹائم اور غیر ضروری نیٹ ورک ٹریفک کا ہونا ممکن ہو جاتا ہے، تاہم، جب مواد میں تبدیلیاں کی جاتی ہیں، تو اس سے کچھ مشکلات پیدا ہو سکتی ہیں کیونکہ ویب پیک کو اب یہ معلوم نہیں ہوتا کہ کون سی فائل کی ضرورت ہے یا نہیں۔
اس طرح، سب سے اچھی چیز کو صاف کرنا ہے dist ڈائریکٹری ہر بار جب درخواست بنڈلنگ کا عمل مکمل ہو جاتا ہے۔
صفائی کو ترتیب دے کر حاصل کیا جا سکتا ہے۔ clean میں اختیار output اعتراض true، تا کہ webpack.config.js اپ ڈیٹ کیا جاتا ہے:
const path = require("path");
module.exports = {
mode: "development",
entry: {
main: path.resolve(__dirname, "src/index.js"),
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[contenthash].js",
clean: true,
},
};
اب، ہر بار جب ہم چلاتے ہیں build کمانڈ، دی dist ڈائرکٹری کو پہلے صاف کیا جاتا ہے اس سے پہلے کہ اس میں کوئی نئی فائل خارج ہوجائے۔
تو اس کے بارے میں ہے entry اور output; بنڈلنگ کے لیے فائلیں کہاں سے حاصل کی جائیں، اور بنڈلنگ کے بعد فائلیں کہاں رکھی جائیں۔
کنفیگریشن فائل کے ساتھ دو دیگر اہم آپشنز ہیں جن میں ہم شامل کر سکتے ہیں: loaders، اور plugins.
پلگ انز
عمل میں پلگ ان دیکھنے کے لیے، ہم استعمال کریں گے۔ HTMLWebpackPlugin جس کے ذریعے HTML فائلوں کو متحرک طور پر تخلیق کرنا ممکن بناتا ہے۔ html-webpack-plugin پیکیج:
$ yarn add --dev html-webpack-plugin
# Or
$ npm install --save-dev html-webpack-plugin
پھر کنفگ فائل کے پلگ ان سیکشنز میں، ہم پاس کرتے ہیں۔ title HTML فائل کی تعمیر کی جائے گی، اور a filename:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
entry: {
main: path.resolve(__dirname, "src/index.js"),
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[contenthash].js",
clean: true,
},
plugins: [
new HtmlWebpackPlugin({
title: "Testing html file",
filename: "index.html",
}),
],
};
اب، جب ہم چلاتے ہیں build کمانڈ، میں ایک HTML فائل بنائی گئی ہے۔ dist فولڈر اور میں index.html فائل، آپ دیکھیں گے کہ منفرد js فائل جو بنڈل کی گئی تھی خود بخود شامل ہو گئی ہے:
بہترین طرز عمل، صنعت کے لیے منظور شدہ معیارات، اور چیٹ شیٹ کے ساتھ Git سیکھنے کے لیے ہمارے ہینڈ آن، عملی گائیڈ کو دیکھیں۔ گوگلنگ گٹ کمانڈز کو روکیں اور اصل میں سیکھ یہ!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing html file</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="main.b908ea8ce529b415a20a.js"></script></head>
<body>
</body>
</html>
اگر آپ کی خواہش آپ کے بطور استعمال کرنے کے لیے ایک ٹیمپلیٹ تیار کرنا ہے۔ index.html میں صفحے dist فولڈر، آپ اسے منسلک کرکے حاصل کرسکتے ہیں۔ template میں اختیار plugins config فائل کا آپشن، پھر میں ایک ٹیمپلیٹ فائل کی وضاحت کریں۔ src فولڈر جس کی قدر ہوگی۔ template آپشن:
module.exports = {
plugins: [
new HtmlWebpackPlugin({
title: "Testing html file",
filename: "index.html",
template: path.resolve(__dirname, "src/template.html"),
}),
],
};
پھر میں template.html فائل، ہم چند مارک اپ کی وضاحت کر سکتے ہیں۔ ایک بات قابل غور ہے کہ اس ٹیمپلیٹ فائل کو ان تمام چیزوں تک رسائی حاصل ہے جس کی ہم نے وضاحت کی ہے۔ new HtmlWebpackPlugin اعتراض، جیسے title, filename، جسے ہم فائل میں درآمد کر سکتے ہیں:
// src/template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<header>
<h1>Template File of </h1>
</header>
</body>
</html>
اب، جب ہم اپنی ایپ کو دوبارہ بناتے ہیں، تو ہمیں پیدا کردہ میں عنوان ملتا ہے۔ dist/index.html "ٹیسٹنگ HTML فائل" بننے کے لیے:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing html file</title>
<script defer src="main.b908ea8ce529b415a20a.js"></script></head>
<body>
<header>
<h1>Template File of Testing html file</h1>
</header>
</body>
</html>
لوڈرز
پہلے سے طے شدہ طور پر، ویب پیک JavaScript اور JSON (JavaScript آبجیکٹ نوٹیشن) کو سمجھتا ہے، لیکن یہ نہیں جانتا کہ امیج فائل کیا ہے، یا HTML، CSS، SASS، یا SVG فائلیں ہیں، بشمول دیگر اقسام کی فائلیں؛ یہ نہیں جانتا کہ انہیں کس طرح سنبھالنا ہے. اس چیلنج کی وجہ سے لوڈرز آتے ہیں۔
اگر آپ کے پاس ایچ ٹی ایم ایل، سی ایس وی، ایس وی جی، سی ایس ایس، ایس اے ایس ایس، یا امیج فائلز ہیں، تو آپ کے پاس ان تمام مختلف قسم کی فائلوں کے لیے لوڈرز ہوسکتے ہیں جو سورس فولڈر میں دیکھیں گے، انہیں تلاش کریں گے، اور پھر ان کو ماڈیولز میں تبدیل کریں گے جنہیں درآمد کیا جاسکتا ہے۔ جاوا اسکرپٹ کے ذریعہ۔
آئیے اس SVG فائل کو اس میں منسلک کرکے ایک عام مثال دیتے ہیں۔ src فولڈر اور سی ایس ایس فائل بھی۔ اگر ہم اسے لانا چاہتے ہیں اور اسے اچھی طرح سے بنڈل کرنا چاہتے ہیں تو ہم ایک لوڈر استعمال کریں گے۔ index.js فائل، یہاں دو چیزیں ہونی چاہئیں۔ دی index.js فائل فائل کی قسم کو لوڈ کرنے کے لئے ایک لوڈر کے طور پر کام کرتا ہے، پھر یہ لوڈر کو درآمد کیا جاتا ہے dist ڈائرکٹری جب ایپ بنڈل ہو، تاکہ یہ ایپلیکیشن کے انحصار گراف کا حصہ بن جائے۔
Webpack کے ساتھ CSS فائلیں لوڈ ہو رہی ہیں۔
ہم ایک تشکیل دے سکتے ہیں۔ main.css میں src فولڈر:
// src/main.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
پھر اپ ڈیٹ کریں index.js:
import style from "./main.css";
console.log("Hello world! My name is Uche Azubuko!");
میں loaders کنفگ فائل میں آپشن، اب ہم بنڈلنگ کے عمل کے دوران مختلف قسم کی فائلوں کو ماڈیول کے طور پر لوڈ کرنے کے لیے اصول مرتب کر سکتے ہیں۔
module.exports = {
module: {
rules: [{ test: /.css$/, use: ["style-loader", "css-loader"] }],
},
};
یہاں، ہم نے ایک اصول بنایا ہے جو سی ایس ایس فائلوں کو لوڈ کرنے کے لیے لوڈرز کی ایک صف فراہم کرتا ہے۔ src فولڈر؛ دائیں سے بائیں پڑھا جا رہا ہے۔ سی ایس ایس لوڈر فائل کو تلاش کرتا ہے، اسے ماڈیول میں بدلتا ہے اور جاوا اسکرپٹ کو دیتا ہے، جبکہ style-loader درآمد شدہ ماڈیول لیتا ہے، اور اس میں انجیکشن لگاتا ہے۔ dist/index.html فائل.
وہ دیو انحصار ہیں، اس طرح، ہمیں انہیں ایپلی کیشن میں بھی انسٹال کرنا ہوگا:
$ yarn add --dev style-loader css-loader
# Or
$ npm install --save-dev style-loader css-loader
جب ہم چلاتے ہیں۔ build کمانڈ، بنڈلنگ کے عمل سے نتیجے میں آنے والی جاوا اسکرپٹ فائل اب CSS فائل کے بارے میں جانتی ہے اور اسے اس میں داخل کرتی ہے۔ dist اپلی کیشن.
فرض کریں کہ آپ چاہتے ہیں کہ آپ براؤزر پر اپنی ایپلیکیشن کا ڈویلپمنٹ ورژن لانچ کریں۔ سب سے پہلے، ہم ایک اور آپشن شامل کرتے ہیں۔ scripts میں اعتراض package.json فائل:
"dev": webpack serve
کمانڈر serve کے ساتھ شامل کیا جاتا ہے۔ webpack. یہ ہر چیز کی تعمیل کرتا ہے اور اسے میموری میں رکھتا ہے۔ تشکیل فائل میں، ہم پھر دو اختیارات شامل کرتے ہیں: devtool اور devServer. یہ وہ اختیارات ہیں جو سرور پر کام کو بہترین بنانے میں مدد کرتے ہیں۔
دیو ٹولز
۔ devtool config آپشن کنٹرول کرتا ہے کہ تالیف کے دوران ماخذ کے نقشے کیسے اور کیسے بنائے جاتے ہیں۔ سورس میپنگ اس بات پر نظر رکھتی ہے کہ تمام مواد کہاں سے آیا ہے، اور براؤزر کو یہ بتاتا ہے کہ کوئی ممکنہ خرابی کہاں سے آ رہی ہے:
module.exports = {
devtool: "inline-source-map",
};
ڈیوسرور
یہ اس سرور کی ترتیب کی وضاحت کرتا ہے جسے ہم ترتیب دے رہے ہیں، اور ہم اس کی وضاحت کرتے ہیں کہ ایپ کی بنیاد کہاں سے چلنی چاہیے۔ ہم استعمال کرتے ہوئے ہاٹ ماڈیول ری لوڈنگ (HMR) کی بھی وضاحت کرتے ہیں۔ hot آپشن، وہ پورٹ نمبر سیٹ کریں جس میں ایپ چلے گی، کا استعمال کرتے ہوئے تبدیلیاں دیکھیں watchFiles اس کی قیمت کو مقرر کرکے src فولڈر، استعمال کریں open ڈویلپمنٹ ورژن لانچ کرنے کے لیے تالیف کا عمل مکمل ہونے پر براؤزر کو فوری طور پر کھولنے کا آپشن، اور اس کا استعمال کرتے ہوئے اپنی پسند کا پورٹ نمبر سیٹ کریں۔ port آپشن:
module.exports = {
/* ... */
devServer: {
contentBase: path.resolve(__dirname, "dist"),
port: 5001, // default is often 8080
open: true,
hot: true,
watchFiles: [path.resolve(__dirname, 'src')],
},
};
بیان کردہ کے علاوہ devServer آپشن، ہمیں بھی انسٹال کرنے کی ضرورت ہے۔ webpack-dev-server ایک dev انحصار کے طور پر پیکیج، جو مدد کرنا ہے۔
اب جب ہم چلاتے ہیں۔ dev کمانڈ، ایپ کو براؤزر پر پر رینڈر کیا جاتا ہے۔ localhost:5001, وہ تمام مواد دکھا رہا ہے جو میں داخل کیا گیا ہے۔ dist/index.html بنڈلنگ کے عمل کے دوران:
گرم ماڈیول کی تبدیلی کے فعال ہونے کے ساتھ، اگر آپ ترقی کے دوران کوئی تبدیلی کرتے ہیں، تو یہ فوری طور پر براؤزر پر ظاہر ہوتا ہے جب آپ تبدیلیاں محفوظ کرتے ہیں۔
تصاویر لوڈ ہو رہی ہیں۔
ایک اور چیز جسے ویب پیک کے ورژن 5 میں آسان بنایا گیا ہے وہ بلٹ ان ہے۔ asset/resource لوڈر، جسے ہم بنڈلنگ کے عمل کے دوران ایپ میں انجیکشن لگانے کے لیے تصاویر کو چیک کرنے کے لیے استعمال کر سکتے ہیں:
module.exports = {
module: {
{ test: /.(svg|ico|png|webp|jpg|gif|jpeg)$/, type: "asset/resource" },
},
};
یہاں، ہم نے ان تمام فائلوں کو تلاش کرنے کے لیے ایک چیک لکھا ہے جو درج ذیل فائل کی قسم سے وابستہ ہیں اور انہیں میں انجیکشن لگاتے ہیں۔ dist بنڈلنگ کے دوران فولڈر: svg، ico، png، webp، jpg، gif، jpeg۔
اپ ڈیٹ کریں src/index.html SVG فائل کو شامل کرنے کے لیے جسے آپ نے پہلے ڈاؤن لوڈ کیا تھا:
import style from "./main.css";
import logo from "./logo.svg";
console.log("Hello world! My name is Uche Azubuko!");
اب، چلائیں dev کمانڈ، اور SVG فائل کو اب مرتب کیا جانا چاہئے اور بنڈلنگ کا عمل کامیاب ہونا چاہئے۔
عام طور پر، ہم ایک جزو فائل کے اندر ایس وی جی کا استعمال کرنا چاہیں گے۔ اس کے لیے، آئیے ایک بنائیں component.js میں دائر src فولڈر اس میں، ہم ایک ماڈیول بنائیں گے جو صفحہ پر مواد بنانے کے لیے استعمال کرے گا:
import logo from "./logo.svg";
function component() {
let main = document.createElement("main");
let para = document.createElement("p");
let img = document.createElement("img");
main.append(para);
para.append(img);
img.src = logo;
img.alt = "logo for the app";
return main;
}
export default component;
ہمارے لیے تصویر کا استعمال کرنے کے لیے، پہلا قدم اسے فائل میں درآمد کرنا ہوگا۔ پھر ہمیں بھی درآمد کرنے کی ضرورت ہے۔ component.js میں دائر index.js تاکہ اسے بنڈل کیا جا سکے اور DOM پر پیش کیا جا سکے۔ جزو ایک فنکشن ہے جسے کہا جاتا ہے اور واپس کرتا ہے۔ main عنصر جو میں واپس کیا گیا تھا۔ component.js فائل، اور پھر DOM کے جسم میں انجکشن کیا جاتا ہے:
import style from "./main.css";
import logo from "./logo.svg";
import component from "./component";
console.log("Hello world! My name is Uche Azubuko!");
document.body.append(component());
اب، جب ہم دوبارہ ڈیو سرور چلاتے ہیں، تو ہمارے پاس SVG فائل اب DOM پر رینڈر ہونی چاہیے:
اگر ہم چاہتے ہیں کہ ہماری بنڈل تصاویر بنڈلنگ مکمل ہونے کے بعد اپنے اصل نام کو برقرار رکھیں، webpack.config.js، ہم مقرر کر سکتے ہیں assestModuleFilename ہونا "[name][ext]" میں output آپشن:
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[contenthash].js",
clean: true,
assetModuleFilename: "[name][ext]",
},
اب، جب ہم ڈویلپمنٹ سرور کو دوبارہ شروع کرتے ہیں تو تصویر کا نام وہی ہونا چاہیے جیسا کہ بنڈلنگ ہونے سے پہلے تھا۔
منتقلی
اپنے کوڈ کو پرانے ES5 ورژنز میں منتقل کرنا اکثر ایک اچھا خیال ہوتا ہے تاکہ پرانے براؤزر آپ کے کوڈ کو سمجھ سکیں، اسی طرح نئے براؤزرز جو ES6 اور ES7 استعمال کرتے ہیں، کر سکتے ہیں۔ اسے حاصل کرنے کے لیے، ہم بابل ٹول استعمال کرتے ہیں۔
اب، ہم ایک اصول شامل کرتے ہیں جو جاوا اسکرپٹ کی تمام فائلوں کو تلاش کرتا ہے۔ src فولڈر کو چھوڑ کر node_modules فولڈر، پھر ان کا استعمال کرتے ہوئے منتقل کریں babel-loader جو استعمال کرتا ہے @babel/core اور ترتیب دینے کے ساتھ ساتھ ایک دیو انحصار کے طور پر انسٹال کیا جائے گا۔ presets اختیارات @babel/preset-env.
سب سے پہلے، ہم مطلوبہ پیکجوں کو انسٹال کرتے ہیں:
$ yarn add --dev babel-loader @babel/core @babel/preset-env
# Or
$ npm install --save-dev babel-loader @babel/core @babel/preset-env
module.exports = {
module: {
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { presets: ["@babel/preset-env"] },
},
},
},
};
فائل کو محفوظ کریں، پھر ڈویلپمنٹ سرور کو دوبارہ چلائیں۔ اس بار، ہماری ایپلی کیشن میں اب پرانے براؤزرز کے لیے سپورٹ ہے جو ES5 ماڈیولز استعمال کرتے ہیں اور اب زیادہ پسماندہ مطابقت رکھتے ہیں۔
نتیجہ
اس گائیڈ کا مقصد آپ کو یہ دیکھنا تھا کہ چیزیں کس طرح کام کرتی ہیں۔ کراس براؤزر سپورٹ کے لیے جاوا اسکرپٹ کے ماڈیولز کیسے بنائیں، بابل کے ساتھ ٹرانسپائل کیسے کریں، سورس میپس کیسے بنائیں، اور اپنے فرنٹ اینڈ ماحول کو اتنا ہی آسان اور جدید بنائیں جتنا آپ چاہیں گے۔
یہاں تک کہ اگر آپ جیسے اوزار استعمال کرتے ہیں۔ vue-create Vue پروجیکٹ قائم کرنے کے لیے یا create-react-app ایک React ایپ قائم کرنے کے لیے، سچ یہ ہے کہ وہ پردے کے پیچھے ویب پیک استعمال کرتے ہیں۔
Webpack کو سمجھنا واقعی اتنا مشکل نہیں ہے، اور اس گائیڈ سے، یہ آپ کے لیے بہت اچھا ہو گا کہ آپ اپنی سیکھنے میں توسیع کریں کہ SASS، Webpack میں PostCSS، اور پروڈکشن آپٹیمائزیشن کے ساتھ کیسے کام کیا جائے۔ اگر آپ کو یہ مشکل لگتا ہے تو بلا جھجھک مجھ سے رابطہ کریں، مجھے مدد کرنے میں خوشی ہوگی۔
ایک بار پھر، آپ اس پراجیکٹ کو استعمال کر سکتے ہیں جسے ہم نے اس گائیڈ میں بنایا ہے ایپلیکیشنز کے لیے بوائلر پلیٹ کے طور پر جسے آپ سادہ ویب پیک استعمال کر کے بنانا چاہتے ہیں، اور آپ آسانی سے کوئی اور چیز ترتیب دے سکتے ہیں جو آپ کو پسند ہو۔
آپ اس گائیڈ میں استعمال ہونے والے تمام سورس کوڈ کا حوالہ دے سکتے ہیں۔ Github کے.
