> ## 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.

# Налаштування Webpack для плагіна браузера

Цей посібник описує, як налаштувати проект розширення браузера з Webpack, зосереджуючись на конфігурації, яка підтримує кілька точок входу JavaScript та управління статичними активами.

### Крок 1: Початкове налаштування проекту

Почніть з організації вашого проекту для розміщення вихідних файлів, статичних активів та кінцевого зібраного виходу. Директорія вашого проекту повинна виглядати приблизно так:

```
your-extension/
├── public/            # Містить статичні файли, такі як HTML, CSS та маніфест
│   ├── images/
│   ├── icons/
│   ├── manifest.json
│   └── popup.html
├── src/               # Містить ваш вихідний код JavaScript
│   ├── background.js
│   ├── popup.js
│   ├── content_script.js
│   └── ... (будь-які інші JS файли)
└── package.json       # Файл пакету NPM
```

### Крок 2: Налаштування Node.js та NPM

Переконайтеся, що Node.js та NPM встановлені на вашій системі. Node.js необхідний для запуску екосистеми пакунків, а NPM використовується для управління залежностями вашого проекту.

### Крок 3: Встановлення Webpack та інших залежностей

Перейдіть до кореневої директорії вашого проекту в терміналі та ініціалізуйте новий проект NPM, якщо ви ще цього не зробили:

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

Потім встановіть Webpack та необхідні завантажувачі та плагіни:

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

* **Webpack** об'єднує ваші JavaScript та активи.
* **Babel** дозволяє використовувати сучасні функції JavaScript.
* **CopyPlugin** копіює файли та директорії у вашу директорію збірки.
* **File Loader** вирішує import/require() для файлу в URL та виводить файл у вихідну директорію.

### Крок 4: Налаштування Webpack

Створіть файл `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`

Після налаштування вашого проекту з Webpack та його конфігурації, як описано в попередніх кроках, ви захочете автоматизувати процеси збірки та спостереження за допомогою скриптів `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"`: Запускає Webpack в режимі розробки та спостерігає за вашими файлами на зміни, автоматично перекомпілюючи проект при зміні файлу. Це корисно під час розробки для негайного зворотного зв'язку на зміни.

### Крок 7: Тестування та збірка розширення

Щоб зібрати ваше розширення для виробництва, використовуйте:

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

Ця команда викликає Webpack з прапором `--mode production`, оптимізуючи ваш проект для розгортання.

Для розробки ви можете дозволити Webpack спостерігати за вашими файлами та перекомпілювати щоразу, коли виявляються зміни:

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

Це робить процес розробки більш плавним, оскільки вам не потрібно вручну перебудовувати проект після кожної зміни.

### Крок 7: Тестування розширення

Щоб протестувати ваше розширення в Chrome:

1. Перейдіть до `chrome://extensions/` у браузері Chrome.
2. Увімкніть "Режим розробника" у верхньому правому куті.
3. Натисніть "Завантажити розпаковане" та виберіть вашу папку `dist`.

Це встановить розширення локально для тестування та розробки.