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