Webpack: управление зависимостями JavaScript и CSS
Webpack - это инструмент сборки для управления вашими зависимостями (css, js и т. Д.). Но зачем нам это, если мы можем просто добавить js и css в наш html файл, как показано ниже:
Для приложения такого размера нам не нужно управлять зависимостями js и css, однако по мере роста вашего приложения нам потребуется отслеживать многие зависимости файлов и порядок их загрузки. Кроме того, минимизация кода не реализована. Итак, давайте улучшим наше управление зависимостями с помощью webpack.
После того, как мы npm инициализируем ваш проект, мы устанавливаем webpack
$npm init $npm i -D webpack
давайте добавим скрипт сборки в наш файл package.json
Здесь мы указываем входной файл для webpack, чтобы он работал через дерево зависимостей. Начиная с app.js, webpack объединит весь код в один файл пакета, который здесь называется bundle.js. В файлах нам нужно использовать «импорт» и «экспорт», чтобы показать зависимости. Сначала давайте начнем с файла app.js
Это показывает, что файл app.js зависит от first.js. Давайте посмотрим на файл first.js
Файл экспортирует одну функцию с именем handleClick. Теперь мы можем выполнить скрипт webpack
$npm run build
Как видите, webpack собирает и создает bundle.js. У вас должна быть следующая файловая структура
Теперь мы удаляем файлы js и заменяем их одним файлом пакета
Webpack-Dev-Сервер
В предыдущем разделе мы использовали файловый протокол для отображения страницы в нашем браузере. Мы не должны этого делать. Нам нужен веб-сервер для рендеринга страницы. Итак, давайте установим webpack-dev-server. Что такое webpack-dev-server? Это небольшой экспресс-сервер, который охватывает webpack и всю его функциональность. Установим webpack-dev-server.
@npm i -D webpack-dev-server
Затем нам нужно изменить сценарий сборки, чтобы использовать webpack-dev-server.
Давайте снова запустим сценарий и заметим, что страница теперь размещена на http: // localhost: 8080. Также теперь мы можем удалить папку dist, которая включает файл bundle.js, и приложение все равно будет работать, потому что webpack-dev-server создает файл bundle.js и помещает его в память. Это очень удобно, потому что при изменении любого файла, который является частью дерева зависимостей, webpack-dev-server автоматически перестраивает файл пакета и перезагружает приложение.
Файл конфигурации Webpack
Чтобы полностью использовать возможности webpack, нам нужен файл конфигурации. Файл конфигурации проинструктирует веб-пакет, что делать с нашими исходными файлами. Создайте «webpack.config.js» в корне проекта.
Перед запуском сценария сборки нам нужно удалить параметры из команды сборки, потому что сборка теперь будет использовать файл конфигурации, чтобы указать веб-пакету, что делать. Новый package.json должен выглядеть следующим образом:
Загрузчики и плагины
Настоящая сила webpack заключается в загрузчиках и плагинах, к которым webpack предоставляет вам доступ.
Загрузчики - это задачи, которые применяются к каждому файлу и запускаются, когда webpack создает ваш пакет. Типичной задачей является предварительная обработка файла sass в css и загрузка вывода в раздел заголовка нашего файла html.
Плагины - это процесс, применяемый к вашему пакету перед его отправкой в выходной файл. Типичный плагин - это плагин минификации.
Чтобы проиллюстрировать загрузчики и плагины, давайте удалим все ссылки на файлы css из нашего index.html и импортируем файл css из нашего файла ввода (app.js). Для этого нам понадобится несколько загрузчиков и плагинов, выполняющих это преобразование. В этом случае нам понадобятся два загрузчика и один плагин: «css-loader», «style-loader» и «extract-text-webpack-plugin».
$npm i -D css-loader style-loader extract-text-webpack-plugin
Теперь нам нужно указать webpack использовать эти загрузчики для анализа файлов css.
Это позволит webpack взять все импортированные файлы css и объединить их в пакет под названием «bundle.css».
Теперь мы можем удалить ссылки на файлы css со страницы index.html и заменить их одной ссылкой на файл bundle.css.
Теперь у нас есть все зависимости css и js, которыми управляет и обрабатывает webpack.
Чтобы реализовать дополнительный загрузчик sass, мы делаем следующее
Как видите, мы изменили пути к пакетам на dist / css / bundle.css для css и dist / js / bundle.js. Наконец, мы должны соответствующим образом скорректировать index.html.
