> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# ब्राउज़र प्लगइन के लिए वेबपैक सेटअप

यह गाइड बताता है कि कैसे अपने ब्राउज़र एक्सटेंशन प्रोजेक्ट को वेबपैक के साथ सेटअप करें, जिसमें कई जावास्क्रिप्ट एंट्री पॉइंट्स और स्टैटिक एसेट मैनेजमेंट का समर्थन करने वाला कॉन्फ़िगरेशन शामिल है।

### चरण 1: प्रारंभिक प्रोजेक्ट सेटअप

अपने प्रोजेक्ट को स्रोत फाइलों, स्टैटिक एसेट्स और अंतिम बंडल आउटपुट को समायोजित करने के लिए संरचित करना शुरू करें। आपका प्रोजेक्ट डायरेक्टरी कुछ इस तरह दिखना चाहिए:

```
your-extension/
├── public/            # HTML, CSS, और मैनिफेस्ट जैसी स्टैटिक फाइलें शामिल हैं
│   ├── images/
│   ├── icons/
│   ├── manifest.json
│   └── popup.html
├── src/               # आपका जावास्क्रिप्ट स्रोत कोड शामिल है
│   ├── background.js
│   ├── popup.js
│   ├── content_script.js
│   └── ... (कोई अन्य JS फाइलें)
└── package.json       # NPM पैकेज फाइल
```

### चरण 2: Node.js और NPM सेटअप करना

सुनिश्चित करें कि आपके सिस्टम पर Node.js और NPM इंस्टॉल हैं। Node.js पैकेज इकोसिस्टम को चलाने के लिए आवश्यक है, और NPM आपके प्रोजेक्ट की निर्भरताओं को प्रबंधित करने के लिए उपयोग किया जाता है।

### चरण 3: वेबपैक और अन्य निर्भरताएँ इंस्टॉल करना

टर्मिनल में अपने प्रोजेक्ट की रूट डायरेक्टरी पर जाएँ और यदि आपने पहले से नहीं किया है तो एक नया NPM प्रोजेक्ट प्रारंभ करें:

```bash theme={null}
npm init -y
```

फिर, वेबपैक और आवश्यक लोडर्स और प्लगइन्स इंस्टॉल करें:

```bash theme={null}
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env copy-webpack-plugin file-loader
```

* **Webpack** आपके जावास्क्रिप्ट और एसेट्स को बंडल करता है।
* **Babel** आपको आधुनिक जावास्क्रिप्ट फीचर्स का उपयोग करने की अनुमति देता है।
* **CopyPlugin** फाइलों और डायरेक्टरीज़ को आपके बिल्ड डायरेक्टरी में कॉपी करता है।
* **File Loader** किसी फाइल पर import/require() को एक URL में हल करता है और फाइल को आउटपुट डायरेक्टरी में डालता है।

### चरण 4: वेबपैक कॉन्फ़िगर करना

अपने प्रोजेक्ट रूट में एक `webpack.config.js` फाइल बनाएं। इस फाइल में आपके एंट्री पॉइंट्स, आउटपुट कॉन्फ़िगरेशन, विभिन्न फाइल प्रकारों को लोड करने के लिए मॉड्यूल नियम और अतिरिक्त कार्यक्षमता के लिए प्लगइन्स को परिभाषित करना चाहिए। यहाँ आपके `webpack.config.js` का सेटअप इस प्रकार होना चाहिए:

```javascript theme={null}
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: 'development', // प्रोडक्शन बिल्ड्स के लिए 'production' का उपयोग करें
    entry: {
        background: path.join(__dirname, 'src', 'background.js'),
        popup: path.join(__dirname, 'src', 'popup.js'),
        content_script: path.join(__dirname, 'src', 'content_script.js'),
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: ""
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader',
                ],
            },
        ]
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: 'public', to: '' } // सभी एसेट्स और manifest.json को 'public' से 'dist' में कॉपी करें
            ],
        }),
    ]
};
```

### चरण 5: मैनिफेस्ट और HTML फाइलों को समायोजित करना

सुनिश्चित करें कि आपका `manifest.json` और कोई भी HTML फाइलें स्क्रिप्ट्स और एसेट्स को सही ढंग से संदर्भित करती हैं। उदाहरण के लिए, स्क्रिप्ट्स `dist` फोल्डर में आउटपुट की जाएंगी, इसलिए पथों को तदनुसार अपडेट करें।

### चरण 6: `package.json` में बिल्ड स्क्रिप्ट्स को एकीकृत करना

अपने प्रोजेक्ट को वेबपैक के साथ सेटअप करने और इसे पिछले चरणों में वर्णित के अनुसार कॉन्फ़िगर करने के बाद, आप `npm` स्क्रिप्ट्स का उपयोग करके बिल्ड और वॉच प्रक्रियाओं को स्वचालित करना चाहेंगे। अपनी `package.json` फाइल खोलें और `scripts` ऑब्जेक्ट के भीतर निम्नलिखित स्क्रिप्ट्स जोड़ें:

```json theme={null}
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --mode production",
  "watch": "webpack --mode development --watch"
},
```

यहाँ प्रत्येक स्क्रिप्ट क्या करती है:

* `"build"`: आपके एक्सटेंशन को प्रोडक्शन मोड में बंडल करता है, आउटपुट को तैनाती के लिए ऑप्टिमाइज़ करता है। यह मोड मिनिफिकेशन और डेड कोड एलिमिनेशन जैसी ऑप्टिमाइजेशन को सक्षम करता है।
* `"watch"`: वेबपैक को विकास मोड में चलाता है और आपकी फाइलों में परिवर्तन के लिए देखता है, जब भी कोई फाइल संशोधित होती है तो प्रोजेक्ट को स्वचालित रूप से पुनः संकलित करता है। यह विकास के दौरान परिवर्तनों पर त्वरित प्रतिक्रिया के लिए सहायक होता है।

### चरण 7: एक्सटेंशन का परीक्षण और निर्माण

अपने एक्सटेंशन को प्रोडक्शन के लिए बनाने के लिए, उपयोग करें:

```bash theme={null}
npm run build
```

यह कमांड `--mode production` फ्लैग के साथ वेबपैक को बुलाता है, आपके प्रोजेक्ट को तैनाती के लिए ऑप्टिमाइज़ करता है।

विकास के लिए, आप वेबपैक को अपनी फाइलों को देखने और जब भी परिवर्तन का पता चलता है, तो पुनः संकलित करने के लिए कह सकते हैं:

```bash theme={null}
npm run watch
```

यह विकास प्रक्रिया को सुगम बनाता है, क्योंकि आपको प्रत्येक परिवर्तन के बाद प्रोजेक्ट को मैन्युअल रूप से पुनः निर्माण करने की आवश्यकता नहीं होती है।

### चरण 7: एक्सटेंशन का परीक्षण

Chrome में अपने एक्सटेंशन का परीक्षण करने के लिए:

1. Chrome ब्राउज़र में `chrome://extensions/` पर जाएँ।
2. शीर्ष दाईं ओर "डेवलपर मोड" सक्षम करें।
3. "लोड अनपैक्ड" पर क्लिक करें और अपने `dist` फोल्डर का चयन करें।

यह परीक्षण और विकास उद्देश्यों के लिए एक्सटेंशन को स्थानीय रूप से इंस्टॉल करेगा।