Использовать webpack, не понимая его полностью, как по волшебству? Слышали о чудесах webpack, но обеспокоены его зловещей документацией? Вы из космоса (вроде - совершенно другой галактики) и вообще не слышали о webpack? В любом из этих случаев (и многих других) этот пост для вас!

Webpack: Последний рубеж. Это путешествия флагманского приложения вашего предприятия (или просто вашего любимого проекта). Его tl; dr миссия: смело идти туда, куда раньше уже ходили многие разработчики!

Что такое веб-пакет? Одним словом - сборщик. Короче говоря, webpack - это фрагмент кода, который берет ваш красиво структурированный проект JavaScript (JS) и объединяет его в статические файлы для производства, и все это с помощью одной команды в интерпретаторе командной строки (CLI). Магия!

Что будем строить?

Отличное приложение, вот что. Он называется «Your Phrase Fireworks» (сокращенно YOPF). Видение YOPF: вы вводите фразу в поле ввода, и фраза отображается в окружении безумно крутых взрывающихся фейерверков. Не может быть ничего более крутого, чем это.

Щелкните здесь, чтобы просмотреть демонстрацию приложения

Поскольку вы разработчик, я предполагаю, что вы используете современный браузер, например Chrome или Firefox. Если нет, пожалуйста - мы рассмотрим совместимость браузера и веб-пакета позже.

Давайте создадим проект webpack

Предположения

  1. Вы знакомы с JS, HTML и CSS (ничего особенного - подойдут основы)
  2. У вас уже установлен Node.js. Если нет, установи и возвращайся.
  3. Вы умеете редактировать файлы (я предпочитаю WebStorm IDE, но подойдет даже Блокнот - хотя вы можете предпочесть Sublime или VSCode)
  4. Вы знаете, как просматривать папки на вашем компьютере

Настройте приложение

Перейдите в папку проектов на вашем компьютере (через интерфейс командной строки или любой визуальный файловый менеджер). Я предоставлю инструкции по интерфейсу командной строки ниже, но не стесняйтесь использовать свои собственные методы для создания файлов / папок.

Каждый проект начинается одинаково - с создания папки вашего проекта. Для этого введите следующие запросы командной строки:

mkdir my-project

тогда:

cd my-project

тогда:

npm init -y

Удивительный! Теперь у нас есть модуль npm. Затем давайте установим веб-пакет:

npm i webpack -D

Поскольку это настоящий проект, нам потребуется несколько дополнительных условий:

  1. Контроль версий (Git)
  2. Спецификация для нашего приложения

Первое легко; если у вас не установлен Git, установите его. Теперь в папке вашего проекта запустите это:

git init -q

Здорово! У нас есть Git! Мы не будем касаться этого в руководстве, но это хорошая практика.

Ко второму - спец. Поскольку это просто сообщение в блоге, мы не будем вдаваться в подробности, но основная суть нашей спецификации будет следующей: мы хотим создать приложение, в котором вы вводите что-то во входные данные, нажимаете кнопку отправки, а затем то, что вы ввели во входные данные, появляется на экране, а вокруг него взрывается фейерверк. Это приложение будет называться YOPF, сокращенно от «Your Phrase Fireworks».

Создадим папку с исходными файлами:

mkdir src

У тебя это хорошо получается :). Вы можете догадаться, что будет дальше? Ты получил это:

cd src

Теперь давайте создадим файл app.js:

. > app.js

Если вы копируете мои команды выше, не обращайте внимания на ошибку; это просто мой хитрый способ создания нового файла в командной строке (CMD), интерпретаторе командной строки Windows. Не стесняйтесь использовать разные команды интерфейса командной строки, если они вам больше подходят.

Давайте создадим наши файлы CSS и HTML:

.>app.css & .>index.html

Вау - два файла с одной командой CLI. Что может быть лучше, чем это? Да, оно может! Давайте отредактируем файлы.

Для начала добавим что-нибудь в наш файл index.html:

<div id="phrase-form-wrapper"></div>
<div id="phrase-fireworks-wrapper"></div>

Прохладный. У нас есть фантики. Поскольку мы знаем, что модульность - это название игры (мы знаем это, верно?), Давайте создадим несколько модулей. Мне очень нравится, когда мои приложения выглядят одинаково на всех уровнях (а вы должны быть похожи на меня… Я пишу сообщения в блогах!), Поэтому давайте создадим еще две папки внутри папки src:

mkdir form & mkdir fireworks

… И в каждом из них создадим одинаковые файлы:

cd form & .>form.index.js & .>form.index.html & .>form.css 
& cd ../fireworks & .>fireworks.index.js & .>fireworks.index.html & .>fireworks.css

Теперь у нас есть приложение с двумя модулями. Один для формы фразы, один для фейерверка и «основной модуль» для привязки их обоих к одному приложению.

Настроить webpack

Нам также нужен файл webpack.config.js, который будет содержать… ну… нашу конфигурацию webpack. Что это обозначает? Это означает, что для того, чтобы волшебство webpack сработало, вам нужно указать ему, что делать. Вы можете назвать этот файл abracadabra или legerdemain или как угодно, что вам нравится. Дело в том, что нет ничего волшебного (извините, Джереми Мессерсмит…); все это волшебное объединение - результат настроенной вами конфигурации.

Обычно конфигурация веб-пакета состоит из трех частей:

Общая конфигурация: Сообщите веб-пакету, где находится «основной» файл (термин веб-пакет - запись), где и как все выводить, как обрабатывать исходные карты, как действовать в режиме разработки и т. д.

Загрузчики: ядро ​​веб-пакета загружает только файлы JS. Загрузчики позволяют webpack обрабатывать различные типы файлов (CSS, HTML, изображения и т. Д.). Вы просто устанавливаете их с помощью npm.

Плагины: они расширяют возможности веб-пакета для обработки вещей, для которых вы обычно используете инструменты автоматизации, такие как Gulp или Grunt, например, уменьшение вашего кода (последняя тенденция - использовать npm напрямую).

Вот список (без определенного порядка) того, чего мы хотим достичь с помощью webpack при создании нашего приложения:

  1. Установите наш основной модуль как запись для нашего приложения
  2. Загрузить файлы HTML и CSS
  3. Уточните наш код
  4. Создайте папку dist с файлом index.html, который будет входной точкой для нашего приложения.

Во-первых, низко висящий плод - установка наших загрузчиков HTML и CSS:

npm i -D html-loader style-loader css-loader

Теперь мы установим 3 плагина, которые помогут нам достичь других целей:

npm i -D uglifyjs-webpack-plugin html-webpack-plugin clean-webpack-plugin

Как следует из их названий, эти плагины помогают нам в минификации файлов, автоматическом создании рабочего index.html и удалении наших папок сборки перед каждой новой сборкой соответственно.

Чтобы использовать их, давайте сделаем наш файл webpack.config.js таким:

Создайте новый файл в корне проекта:

.>webpack.config.js

… И скопируйте содержимое указанного выше файла внутрь.

Как работает этот файл конфигурации? Как упоминалось выше, мы устанавливаем запись (наш основной модуль) и вывод. Мы также устанавливаем плагины как массив плагинов. Наконец, мы устанавливаем загрузчики (теперь они находятся в разделе module.rules).

Еще один шаг перед тем, как мы начнем: давайте настроим команду сборки для удобства использования. Откройте package.json (в корне приложения). Добавьте новое свойство к объекту “scripts”:

“build”: “webpack”

Ваш файл package.json теперь должен выглядеть так:

На этом все по инфраструктуре (пока;)). Теперь самое интересное действительно начинается!

Давайте запрограммируем наше приложение!

Начнем с основного модуля. Мы бы хотели, чтобы он сделал следующее:

  1. Импортируйте его HTML-шаблон и добавьте его в DOM.
  2. Импортируйте его CSS и добавьте в DOM
  3. Импортируйте два субмодуля

Вот где вступает в действие webpack, который делает все очень простым. Приступим к кодированию:

Импортируйте шаблон HTML и добавьте его в DOM

import template from './index.html';

(function() {
    document.body.innerHTML = template;
})();

html-loader анализирует файлы .html и возвращает строку HTML.

Импортируйте CSS и добавьте его в DOM

import template from './index.html'; 
import {} from './app.css';
(function() {
    document.body.innerHTML = template;
})();

Я даже не знаю, стоило ли это отдельного шага, но это мой блог, так что вам придется смириться с этим. Все, что я сделал, это добавил строку для импорта файла CSS. Мой css-loader анализирует CSS и отправляет его моему style-loader, который вставляет его в DOM.

Давайте поместим немного CSS в app.css, просто для удовольствия:

Импортируйте два подмодуля

Прямо сейчас вы должны знать, чего ожидать - просто импортируйте два наших класса / модуля:

import template from './index.html'; 
import {} from './app.css';
import YOPFForm from './form/form.index';
import YOPFFireworks from './fireworks/fireworks.index';
(function() {
    document.body.innerHTML = template;
})();

Здесь я добавил две новые строки, которые импортируют form и fireworks из соответствующих файлов.

Создание приложения

Мы так много сделали и даже не знаем, работает ли это. Построим и посмотрим, как это выглядит.

Выполните команду:

npm run build

Когда это будет сделано, у вас будет папка dist. Внутри вы должны увидеть файл index.html. Откройте его, чтобы увидеть взрывные результаты.

Вот что вы должны увидеть при проверке элементов страницы с помощью инструментов разработчика:

Вы можете видеть, что наши обертки на месте, наш стиль был добавлен в DOM с помощью webpack. Вы также можете увидеть наш шаблон (который мы вставили в DOM в app.js немедленно вызываемом функциональном выражении (IIFE)).

Запустите его на своем компьютере, чтобы посмотреть, как он выглядит:

Резюме

Ух ты - мы сделали много! Мы настроили веб-пакет для объединения нашего приложения - JS, CSS и HTML. Мы настроили наш модуль entry (основной) для загрузки нашего шаблона и CSS и помещения их в DOM, а также настроили webpack, чтобы аккуратно разместить их внутри HTML-страницы.

Теперь наша миссия - создать два строительных блока приложения: нашу форму и наш фейерверк.

Модуль формы

Что должен делать модуль формы?

  1. Импортируйте наш HTML-шаблон и вставьте его в DOM (звучит знакомо?)
  2. Настройте действие формы, чтобы отправить фразу
  3. Создайте какой-то API, чтобы другие модули могли с ним взаимодействовать

Да, API. Это фраза, которая заставляет меня выглядеть умным ...

Этот модуль не является записью. Это модуль, который используется другим модулем. Мы можем просто экспортировать класс, который можно создавать каждый раз, когда это необходимо. Итак, базовый код для нашего модуля будет:

class YOPFForm{
    constructor() {
        
    }
}

export default YOPFForm;

Это означает, что, когда мы import модуль, мы получаем класс, который может быть создан с помощью переменных. Поскольку нашему модулю / классу необходимо поместить некоторый HTML в какой-либо элемент, мы хотели бы, чтобы он импортировал HTML и получил элемент для добавления HTML в:

Если вы запустите приведенный выше код, вы не увидите никаких изменений. Для этого вам необходимо отредактировать form.index.html. Давайте поместим внутрь контент:

Нам также нужно использовать новый модуль внутри нашего app.js:

Теперь создайте снова и загрузите index.html (обычно достаточно обновления вкладки). Вы должны увидеть это:

Как это круто? Здесь нужно еще кое-что: возможность подключить ответ к отправке формы. Для этого нам нужно добавить прослушиватель отправки формы, а также API, чтобы внешние модули (например, наш app.js) могли подключаться к нему.

Настройка API формы

Мы добавим в класс метод, который принимает обратный вызов и использует его каждый раз при отправке формы. Затем мы можем использовать этот метод в нашем файле app.js. Это не веб-пакет, поэтому я просто напишу полный код и продолжу:

Запустив этот код, вы увидите, что каждый раз, когда вы отправляете форму, из основной записи выдается предупреждение со значением формы. Что за API…

Но тревога не так уж и впечатляет. Хотим фейерверк !!!

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: полное раскрытие информации - не было предпринято никаких попыток найти полноценное решение, и предлагаемый здесь код не считается передовой практикой. При создании приложения подумайте о проверке ввода, допустив безопасное событие «неслушание» и т. Д.

Модуль фейерверков

Ооооооо - это будет весело!

Мы собираемся использовать для этого npm. Установим пакет фейерверков:

npm i -S fireworks

Теперь нам потребуется фейерверк (я буду использовать Node.js для демонстрации) и импортировать стиль фейерверка. После этого будет простой JS-код, поэтому я не буду вдаваться в подробности. Но вот суть: я покажу метод API, который принимает фразу и представляет ее фейерверком. Вот соответствующие файлы, которые нужно изменить:

Ничего подобного в веб-пакете о том, что было сделано выше - мы просто создали модуль, импортировали его в наш основной файл и использовали. Теперь у нас есть потрясающее приложение !!!

Момент почесывания головы

Пока что нам удалось почти волшебным образом собрать наше приложение и создать рабочий файл index.html с помощью webpack. А теперь почесываешь затылок - что? Нужно ли мне строить и обновлять каждый раз, когда я вношу изменения? Это отнимает много времени и сбивает с толку.

Здесь у webpack есть два решения: режим просмотра и webpack-dev-server.

Режим просмотра прост - вы просто добавляете —-watch к команде webpack внутри package.json, и он работает - webpack будет собирать (или попытайтесь build) ваше приложение при каждом изменении кода. Просто обновите страницу в браузере - и снова волшебство!

webpack-dev-server - гораздо более надежное решение. Требуется небольшая настройка (например, npm install и строка в файле конфигурации), но он выполняет обновление прямо из коробки (и может делать гораздо больше). Поскольку мы не хотим обновляться каждый раз, мы просто установим и настроим webpack-dev-server:

npm i -D webpack-dev-server

Затем вместо использования webpack в интерфейсе командной строки или внутри package.json вы можете просто использовать webpack-dev-server для запуска сервера разработки:

После запуска:

npm run dev

У вас получится что-то вроде этого:

Проект работает на« http: // localhost: 8081 / »

Просто перейдите по адресу, по которому запущен проект, и все будет в порядке (автоматическая перезагрузка и все).

Две небольшие хитрости, которые немного облегчат вашу жизнь: (1) исходные карты (для упрощения отладки) и (2) заставить webpack-dev-server открывать ваш сайт после завершения сборки.

Вот окончательная конфигурация:

Разница заключается в первых двух свойствах объекта конфигурации:

devtool: 'inline-source-map',
devServer: {
    open: true,
    contentBase: './dist'
}

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

Сервер разработки - это гораздо больше, чем я рассказал здесь. Более подробно вы можете узнать в официальных документах. Если вы найдете что-то интересное и актуальное, напишите об этом в разделе комментариев ниже, и, если материала достаточно, я добавлю раздел о webpack-dev-server в этот пост .

Лучшие практики - разработка и производство

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

Затем мы можем добавить скрипты в файл package.json:

scripts: {
   
   dev: webpack-dev-server --config webpack.dev.js,
   build: webpack --config webpack.prod.js
}

С этого момента мы запускаем npm run dev и npm run build.

Бонус: добавление Bootstrap в микс

Bootstrap на сегодняшний день является наиболее широко используемым набором инструментов / библиотек для проектирования. Давайте добавим его в наш проект, чтобы форма выглядела немного лучше:

npm i -S jquery bootstrap

Теперь вы можете предположить, что можете просто использовать импорт, как раньше:

import 'jquery';
import  'bootstrap/dist/js/bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

Но нет ... Это вызовет ошибку, потому что bootstrap.css импортирует файлы шрифтов, которые мы не указали webpack, как обрабатывать - следовательно, он пытается обрабатывать их как JS. Давайте исправим это с помощью простого загрузчика:

npm i -D url-loader file-loader

url-loader кодирует любой файл в base64url. Если он слишком длинный, он просто обслуживает содержимое файла (через file-loader, отсюда file-loader, установленный выше). Мы просто добавляем правило url-loader в наш список правил конфигурации.

// use the url-loader for font files
{
    test: /\.(woff2?|ttf|eot|svg)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 10000
            }
        }
    ]
}

Теперь я собираюсь применить Bootstrap к форме (и внести некоторые незначительные изменения CSS, чтобы сделать приложение более красивым). Здесь нет ничего похожего на webpack. Вы можете увидеть все изменения в этом коммите и посмотреть финальное приложение здесь.

Резюме

К настоящему времени вы знаете достаточно веб-пакетов, чтобы создать свой собственный проект на основе веб-пакетов.

Вы можете увидеть полный проект, который мы только что создали, здесь, на Github.

Давайте подведем итоги того, что мы сделали в этом посте:

  1. Установка и настройка Webpack в файле webpack.config.js
  2. Использование загрузчиков для загрузки файлов HTML и CSS
  3. Использование плагинов, чтобы облегчить нашу жизнь
  4. Разделение нашего приложения на подмодули, которые импортируются одной записью
  5. Использование модулей npm на стороне клиента так, как мы используем их в Node.js
  6. Настройка простого в использовании сервера разработки

Обладая этими фундаментальными знаниями, вы можете построить что-то потрясающее! Но в webpack гораздо больше. Чтобы продолжить свое образовательное путешествие, прочтите сообщения ниже:

  • Ленивая загрузка (скоро)
  • Совместимость браузера (скоро)

Вы также можете самостоятельно изучить webpack и / или задать вопросы в разделе комментариев ниже, если вы застряли.

Наслаждайтесь фейерверком!