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

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