В этой статье мы рассмотрим, как создать веб-страницу и упаковать ее в распространяемый готовый код с помощью Webpack.

Что такое вебпак?

Webpack — это просто упаковщик, он берет ваши js-модули с перекрестными ссылками и создает один статический js-файл. Его также можно настроить с помощью специализированных загрузчиков для обработки таких файлов, как jpg, pngs и css, которые он упакует так, чтобы на них правильно ссылался ваш файл js.

Зачем использовать Webpack?

Разрешая зависимости и минимизируя код во время упаковки, а не во время выполнения, мы оптимизируем скорость, с которой код может работать сразу после того, как он находится в руках клиента. Таким образом, для вашего небольшого эксперимента с прототипом, который никогда не будет использоваться производственным клиентом, использование Webpack, вероятно, является излишним.

Прохождение

Теперь мы рассмотрим этапы создания простого приложения Webpack с использованием CSS, PNG и автоматически сгенерированного HTML.

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.2",
    "file-loader": "6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

Во-первых, мы добавим зависимость от lodash (просто для демонстрации использования внешнего модуля, lodash не имеет ничего общего с Webpack). Мы также устанавливаем dev-зависимости для Webpack, плагин html и специализированные загрузчики для таблиц стилей.

Статические файлы

У нас есть два статических файла для этой демонстрации: png с именем icon.png и css с именем style.css.

style.css

.hello {
    color: red;
}

Мы будем зависеть от них в нашем js-коде, поэтому мы должны сказать webpack, чтобы он искал эти файлы и загружал их правильно.

JS-файлы

У нас есть два js-файла: один — print.js, в котором есть простая функция, которую мы хотим использовать, а другой — index.js, который будет точкой входа для нашего приложения.

print.js

export default function printMe() {
    console.log('I get called from print.js!');
}

index.js

import _ from 'lodash';
import printMe from "./print";
import './style.css';
import Icon from "./icon.png"

function component() {
    const element = document.createElement('div');
    const btn = document.createElement("button");

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

    const myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

    btn.innerHTML = "Click Me!";
    btn.onclick = printMe;

    element.appendChild(btn);

    return element;
}

document.body.appendChild(component());

В файле печати есть только одна экспортированная функция для вывода сообщения на консоль.

В нашем index.js вы можете видеть, что у нас есть МНОГО зависимостей от статических ресурсов, а также функций js. В этом поможет Webpack, встроив код js, ссылки на стили и png в один файл.

Webpack.config.js

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

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "Demo"
        })
    ],
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                use: 'file-loader'
            }
        ]
    }
}

Импорт

Мы импортируем путь, чтобы получить правильные пути для наших выходных данных, и мы импортируем html-webpack-plugin, чтобы позволить нам использовать его в разделе плагинов позже.

Вход

Здесь мы вызываем точку входа (это файл, для которого мы хотим упаковать зависимости). Вы можете иметь несколько записей, просто добавив еще один индекс: someFile.js внутри объекта записи.

Плагины

Здесь мы указываем любые плагины, которые мы используем, я использую HtmlWebpackPlugin с заголовком параметра: Demo, поэтому сгенерированный index.html будет иметь заголовок demo.

Вывод

Первое поле сообщает нам имя файла наших упакованных js-файлов точки входа (так, например, наш index.js будет называться index.bundle.js). Путь говорит нам, куда поместить упакованные файлы, и clean: true означает, что мы должны удалять выходной каталог каждый раз, когда мы собираем (чтобы у нас не было файлов из прошлых сборок).

Модуль

Здесь мы можем указать загрузчики для загрузки наших статических ресурсов в каталог нашего связанного пакета. Мы можем предоставить строку регулярного выражения для тестового поля, которое будет использоваться для проверки файлов в нашем src и сопоставления каждого с правилом. Как только мы получим совпадение, файл будет загружен с помощью загрузчиков, указанных в поле использования.

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