4.75/5 (4) Базовая настройка webpack

Привет, покажу тебе базовую настройку webpack, если ты решил использовать данный сборщик для своего проекта или просто решил разобраться в нем.

На момент написания данной статьи последняя мажорная версия webpack v5.x.x, поэтому, будем отталкиваться от данной версии.

Для небольших проектов, конечно, webpack — не самый лучший выбор ибо для этого есть более простые сборщики на подобие gulp или grunt.

Что такое webpack?

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

Отличие от Gulp/Grunt

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

Он делает это, просматривая require операторы вашего проекта (для CommonJS и AMD) или import операторы (для модулей ES6 с транспилером, например Babel), разбивая код на автономные фрагменты и затем обслуживая их по запросу.

Короче говоря, если у вас есть несколько страниц в одностраничном приложении, вы можете настроить Webpack так, чтобы загружать только код для каждой отдельной страницы. Нет необходимости повторно загружать общие модули.

Webpack — это сборщик модулей — инструмент сборки, а не средство выполнения задач. Вместо того, чтобы следовать списку задач, таких как Grunt или Gulp, Webpack анализирует ваше дерево зависимостей и объединяет ваши ресурсы (файлы JavaScript, CSS, Sass, HTML и т. Д.) В меньшее подмножество файлов.

Возможности webpack

Webpack (вместе с его богатой библиотекой плагинов) позволяет относительно легко делать и другие полезные вещи:

• хеширование файлов для очистки кеша
• внедрение CSS и изображений в проект по мере необходимости в процессе разработки
• возможность запустить встроенный сервер для обслуживания вашего кода и, при желании, прокси-серверных запросов на отдельный сервер.
• автоматическое создание файлов HTML и возможность задать свой шаблон HTML, в который будет внедряться конечный бандл.

Устройство webpack

На самом деле, это очень легко, если акцентируем наше внимание на файл конфигурации webpack.conf.js, который можно логически разделить на 5 основных частей:

• Entry — входная точка исходных файлов
• Output — выходная точка скомпилированных бандлов
• Loaders — загрузчики типов файлов и скриптов
• Plugins — плагины обработки входного и выходного кода
• Mode — режимы сборки
• Browser Compatibility — задание для поддержки выходного бандла для версий браузеров

Простой пример использования

Давайте соберем простое приложение, чтобы продемонстрировать, как работает Webpack. 

Для этого убеждаемся, что у нас есть Node.js в системе с пакетным менеджером NPM и инициализируем Node.js проект

$ npm init

Заполняем все требуемые и необходимые запросы и в коне у нас появится файл package.json в корне папки проекта. Далее создаем файл webpack.conf.js в корне проекта, данный файл служит конфигурационным файлом webpack, в котором мы будем настраивать все необходимые функциональности для автоматизаии сборки нашего будущего проекта.

const path = require('path')

module.exports = {
    mode: 'development',
    target: "browserslist",
    context: path.resolve(__dirname, 'src'),
    entry: [],
    output: {

    },
    devtool: 'source-map',
    devServer: {

    },
    plugins: [

    ],
    module: {

    }
}

Функциональность этого приложения невероятно проста — все, что оно делает, это берет список юзеров с удаленного API в формате JSON, используя ES6, а затем отображает на странице.

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

Код файла webpack.conf.js предельно прост. В начале мы подгружаем нужные нам расширения и модули при помощи require и далее формируем скелет с основными полями и давай подробно рассмотрим стобо каждый из них:

• mode — режим сборки проекта. Обычно это production или development — значения говорят сами за себя
• target — цель построения, обычно это значения web для dev — режима или browserslist — для prod
• context — базовый каталог, абсолютный путь, относительно которого будут указаны пути к точкам входа и для исходников загрузчиков
• entry — точка или точки, с которых следует начать процесс объединения приложений. Если передан массив, то будут обработаны все элементы.
• devtool — этот параметр определяет, будут ли и как создаваться картам исходного кода. Обычно этот параметр false — для prod и source-map — для dev
• devServer — это свойство для конфигурации поведения модуля webpack-dev-server, который используется для быстрой разработки проекта с дополнительными возможностями
• plugins — это основа webpack. Сам webpack построен на системе плагинов, которую вы используете в конфигурации webpack! Они также служат для выполнения всего остального, чего не может сделать загрузчик из раздела module.
• module — модули представляют из себя дополнительные куски кода, которые так и или иначе внося дополнительный функционал для сборки webpack. К примеру, сообщество webpack создало загрузчики для множества популярных языков и языковых процессоров, включая sass, typescript, svg и т.д.
• optimization — возможность оптимизировать код посредством включения различных плагинов сжатия, чистки и пр.

Структура проекта webpack

Дополним структуру нашего проекта новой корневыми папками src и public. В src у нас будут исходные коды и необходимые файлы для включения в проект, а в public — шаблон index.html и иконка favicon.ico для построения Single Page Application.

Итоговым результатом работы webpack должно быть создание в корне проекта третьей папки dist, в которую будут скопированные шаблон index.html из public и скомпилированные исходные файлы css и js в конечные бандлы css и js, которые будут включены в index.html, также, туда будут скопированы все файлы из папки assets, на которые ссылаются из исходного кода

Структура проекта так устроена, чтобы мы смогли охватить использование как можно больше возможностей webpack. Далее в 3-х шагах настроим наш проект до потенциально законченного со всеми возможностями:

1. На первом шаге построим базовый пример без наворотов, но он будет рабочим и простым для понимания
2. На втором шаге мы будем юзать транскомпиляцию на основе babel для обратной совместимости кода для старых браузеров
3. На третьем шаге займемся оптимизацией кода с использованием плагинов оптимизации и разделим режимы запуска на development и production

Шаг 1. Построение базового примера приложения webpack

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

• список необходимых модулей npm
• список необходимых команд для запуска сборки и тестирования
• написать тестовый код в исходника проекта
• написать код конфигурации webpack в файле webpack.config.js

Список модулей

Нам понадобятся следующий список модулей

• clean-webpack-plugin — плагин webpack для удаления/очистки папок сборки
• copy-webpack-plugin — копирует файлы или целые каталоги, которые уже существуют, в каталог сборки.
• css-loader — загрузчик css интерпретирует @import и url() как import/require() и разрешает их
• file-loader — загрузчик файлов преобразует import/require() для файла в URL-адрес и отправляет файл в выходной каталог
• html-webpack-plugin — плагин, который упрощает создание файлов HTML для обслуживания наших пакетов
• normalize.css — плагин для сброса встроенных стилей CSS для Node.js — приложений
• sass-loader — загрузчик Sass/SCSS для webpack. Компилирует SASS в CSS
• sass — модуль для чистой реализация Sass на JavaScript
• style-loader — плагин управляет внедрением конечного CSS в DOM страницы
• webpack-cli — позволяет управлять webpack из командной строки
• webpack-dev-server — создает сервера разработки, который обеспечивает перезагрузку в реальном времени
• webpack — сборщик модулей, собственно, виновник написания данной статьи

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

$ npm i normalize.css
$ npm i -D clean-webpack-plugin copy-webpack-plugin css-loader file-loader html-webpack-plugin sass-loader sass style-loader webpack-cli webpack-dev-server webpack 

как мы видим, модуль normalize.css мы ставим отдельно, так как, нам нужно, чтобы он был включен в проект и для этого, по умолчанию, если не указан ключ -D данный модуль будет отражен в package.json в списке dependencies, вместо devDependencies, в котором те модули, которые не будут включены в проект, но они будут необходимы для процесса сборки и отладки проекта и в итоге у нас будет такой код в package.json