close

Webpack Beginners کے لیے گائیڈ

Webpack جدید ویب ڈویلپمنٹ میں ایک انتہائی مفید ٹول ہے، وسائل کے انتظام اور منصوبوں کے لیے اصلاح میں مدد کرتا ہے۔ یہاں نئے آنے والوں کے لیے ایک بنیادی گائیڈ ہے کہ کس طرح استعمال کیا جائے Webpack:

انسٹال کریں۔ Webpack

سب سے پہلے، Node.js انسٹال کریں اگر آپ کے پاس پہلے سے نہیں ہے۔ پھر، اپنے پروجیکٹ کے لیے ایک ڈائرکٹری بنائیں اور اس ڈائرکٹری میں ٹرمینل/کمانڈ پرامپٹ ونڈو کھولیں۔ Webpack webpack-cli(ویب پیک کا کمانڈ لائن انٹرفیس) انسٹال کرنے اور انسٹال کرنے کے لیے درج ذیل کمانڈز چلائیں:

npm install webpack webpack-cli --save-dev

Webpack کنفیگریشن بنائیں

webpack.config.js اپنی پروجیکٹ ڈائرکٹری کے روٹ میں نام کی ایک فائل بنائیں ۔ یہ وہ جگہ ہے جہاں آپ ترتیب دیں گے Webpack ۔ 

const path = require('path');  
  
module.exports = {  
  entry: './src/index.js', // Entry point of your application  
  output: {  
    filename: 'bundle.js', // Output file name  
    path: path.resolve(__dirname, 'dist') // Output directory  
  }  
};

فولڈرز اور فائلیں بنائیں

src روٹ ڈائرکٹری میں ایک فولڈر بنائیں ، اور اس کے اندر، index.js آپ کی ایپلیکیشن کی مین فائل کے طور پر کام کرنے کے لیے ایک فائل بنائیں۔

رن Webpack

کھولیں Terminal اور اپنے سورس کوڈ کو مرتب کرنے کے لیے درج ذیل کمانڈ کو چلائیں Webpack:

npx webpack

اس کمانڈ کو چلانے کے بعد، Webpack کنفیگریشن کی پیروی کرے گا، index.js فائل کو مرتب کرے گا، اور ڈائرکٹری bundle.js میں نام کی ایک آؤٹ پٹ فائل بنائے گا dist ۔

HTML میں استعمال کریں۔

dist ڈائرکٹری یا اپنی پسند کی جگہ میں ایک HTML فائل بنائیں اور bundle.js فائل سے لنک کریں:

<!DOCTYPE html>  
<html>  
<head>  
  <title>Webpack App</title>  
</head>  
<body>  
  <script src="bundle.js"></script>  
</body>  
</html>

ایپلیکیشن چلائیں۔

اپنے براؤزر میں HTML فائل کھولیں اور چیک کریں کہ آیا آپ کی ایپلیکیشن کام کر رہی ہے۔

یہ صرف ایک بنیادی گائیڈ ہے۔ Webpack اس میں بہت سی طاقتور خصوصیات ہیں جیسے سی ایس ایس کو سنبھالنا، ماڈیولز کا انتظام کرنا، لوڈرز اور پلگ انز کا استعمال، سورس کوڈ کی اصلاح، اور بہت کچھ۔ Webpack اس ٹول کی صلاحیتوں سے پوری طرح فائدہ اٹھانے کے لیے سرکاری دستاویزات کو دریافت کریں ۔