Налаштування 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: Тестування розширення