Настройка Webpack для расширений браузера и Mellowtel

Это руководство описывает, как настроить проект расширения браузера с помощью 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, если вы еще этого не сделали:

npm init -y

Затем установите Webpack и необходимые загрузчики и плагины:

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 с данной настройкой:

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:

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

Вот что делает каждый скрипт:

"build": Собирает ваше расширение в режиме производства, оптимизируя вывод для развертывания. Этот режим включает оптимизации, такие как минификация и устранение мертвого кода.
"watch": Запускает Webpack в режиме разработки и следит за изменениями в ваших файлах, автоматически перекомпилируя проект при изменении файла. Это полезно во время разработки для немедленной обратной связи о внесенных изменениях.

Шаг 7: Тестирование и сборка расширения

Чтобы собрать ваше расширение для производства, используйте:

npm run build

Эта команда вызывает Webpack с флагом --mode production, оптимизируя ваш проект для развертывания. Для разработки вы можете настроить Webpack на отслеживание ваших файлов и перекомпиляцию при обнаружении изменений:

npm run watch

Это делает процесс разработки более плавным, так как вам не нужно вручную пересобирать проект после каждого изменения.

Шаг 7: Тестирование расширения

Чтобы протестировать ваше расширение в Chrome:

Перейдите на chrome://extensions/ в браузере Chrome.
Включите “Режим разработчика” в правом верхнем углу.
Нажмите “Загрузить распакованное” и выберите вашу папку dist.

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

​Шаг 1: Первоначальная настройка проекта

​Шаг 2: Установка Node.js и NPM

​Шаг 3: Установка Webpack и других зависимостей

​Шаг 4: Конфигурация Webpack

​Шаг 5: Настройка манифеста и HTML файлов

​Шаг 6: Интеграция скриптов сборки в package.json

​Шаг 7: Тестирование и сборка расширения

​Шаг 7: Тестирование расширения