Для начала создадим файл package.json. Для этого введём в терминале команду npm init (заранее нужно установить Node.js).
Затем установим webpack командой npm i webpack --save-dev.
Все пакеты для разработки можно разделить на два типа: те, что нужны в финальной сборке, этот код загрузится к клиенту на компьютер, и те, что нужны при разработке проекта. В файле package.json есть разделы: dependencies и devDependencies. Они разделяют пакеты. В dependencies указываем пакеты для финальной сборки, в devDependencies — пакеты для разработки. Флаг --save-dev показывает терминалу, что пакет нужно добавить в раздел devDependencies.
Дальше установим интерфейс webpack CLI для работы с вебпаком — npm i webpack-cli --save-dev.
Вебпак установлен, осталось его настроить.
В блок "scripts": { .. } записываем последовательность команд для сборки. Логика каждой команды уже прописана под капотом у «Вебпака». Об этом нам можно не волноваться :)
Скрипт финальной сборки проекта — "build": "webpack". Добавим его в блок "scripts".
Любой скрипт запускается командой npm run имя скрипта. Запустим npm run build.
! Для того, чтобы команда сработала без ошибок, «Вебпаку» нужно показать, куда идти в первую очередь. По умолчанию точка входа — файл index.js внутри папки src. Поэтому создадим в папке проекта директорию src, а в ней — файл index.js.
В папке проекта появилась директория dist, а внутри неё — файл main.js. В этот файл будет приходить весь js-код проекта.
Чтобы в папке dist не скапливались файлы, её лучше очищать перед каждой сборкой. Для этого заменим скрипт "build" — "build": "rm -rf dist && webpack --mode production". Здесь мы указали, что это сборка для финальной подготовки файлов к публикации.
Одной сборки недостаточно. Допишем команду сборки для разработки — "dev": "webpack serve".
Правила, по которым «Вебпаку» предстоит собирать код, пропишем в конфигурационном файле: webpack.config.js в корне проекта.
Настройки будем записывать в объект module.exports.
Необязательно использовать точку входа по умолчанию. Её можно указать — это объект entry. Ему нужно прописать путь к точке входа в свойстве main:
module.exports = {
entry: { main: './src/index.js' }
}
Кроме точки входа есть точка выхода — итоговый файл, куда «Вебпак» сложит весь код. Её нужно указать в объекте output. У этого объекта 3 свойства: путь к точке выхода, имя файла, куда «Вебпак» положит код, и свойство для обновления путей внутри CSS- и HTML-файлов. «Вебпак» не понимает относительный путь для точки выхода. Но в Node.js есть утилита, которая превращает относительный путь в абсолютный. Она называется path, а подключить его в файл можно функцией require: const path = require('path');
Теперь опишем точку выхода:
В свойстве path мы указали вызов метода path.resolve. Ему переданы два аргумента: ссылка на текущую папку __dirname и относительный путь к точке выхода.
Добавим в module.exports режим разработчика — mode: 'development'.
Настройки локального сервера добавим в объект devServer:
Теперь займёмся транспиляцией — переводом нового синтаксиса в старый. Чтобы каждый браузер понял наш код. Чтобы её выполнить, нам нужен будет очередной NPM-пакет — Babel: npm i @babel/core --save-dev.
Затем установим самый популярный пресет (набор готовых правил) бабель: npm i @babel/preset-env --save-dev.
Иногда изменить синтаксис мало. Например, в старых версиях некоторых браузеров может не быть некоторых методов. Тогда нужно загрузить недостающую функциональность в браузер пользователя вместе с проектом. Такие аналоги новой функциональности называются полифилы. Babel использует библиотеку полифилов core-js, установим её: npm i core-js --save. Эта зависимость нужна в итоговой сборке, поэтому используем флаг --save.
Подключить Babel к Webpack поможет пакет babel-loader: npm i babel-loader --save-dev.
Теперь настроим Babel.
Создадим файл babel.config.js в корне проекта. Заполним его:
Чтобы Webpack задействовал Babel при сборке, добавим код в файл конфигурации Webpack — webpack.config.js:
Настроим обработку HTML файлов
Установим плагин, который учит «Вебпак» работать с html-файлами: npm i html-webpack-plugin --save-dev.
Подключим его вверху файла webpack.config.js: const HtmlWebpackPlugin = require('html-webpack-plugin');
В конец объекта module.exports добавим новое свойство — массив plugins:
Настроим работу с изображениями и шрифтами
Добавим правило поиска файлов с определёнными расширениями:
{
test: /\.(png|svg|jpg|gif|woff(2)?|eot|ttf|otf)$/,
type: 'asset/resource'
}
Настроим обработку CSS
Для обработки CSS нужны два пакета:
npm i css-loader --save-dev
npm i mini-css-extract-plugin --save-dev
Подключим к проекту mini-css-extract-plugin:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
Затем добавьте правило для обработки css-файлов:
{ // применять это правило только к CSS-файлам
test: /\.css$/,
// при обработке этих файлов нужно использовать
// MiniCssExtractPlugin.loader и css-loader
use: [ MiniCssExtractPlugin.loader, {
loader: 'css-loader'
}]
}
Добавим в массив plugins вызов MiniCssExtractPlugin с ключевым словом new.
Установим PostCSS и два плагина для минификации CSS:
npm i postcss-loader --save-dev
npm i autoprefixer --save-dev
npm i cssnano --save-dev
Настроим PostCSS
Создадим в корне проекта файл postcss.config.js:
Если вы используете директиву @import в css-файлах, после подключения postcss-loader, нужно изменить то, как подключается css-loader.
В конце css-loader необходимо передать опцию importLoaders со значением 1:
