Webpack cli что это

Что такое Webpack

Рассказываем, как устроен самый известный бандлер и как настроить базовый проект.

Время чтения: 8 мин

Открыть/закрыть навигацию по статье

Кратко
Базовое использование
1. Отслеживание изменений в проекте
1. Лоадеры
2. Плагины
1. Игорь Камышев советует
Контрибьюторы:

Обновлено 30 января 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Webpack — это самый популярный сборщик в мире JS. Его функции легко расширяются с помощью сторонних пакетов, так что Webpack можно заставить делать практически что угодно. А если готового плагина не нашлось, благодаря мощному API можно написать решение под свой уникальный случай.

Базовое использование

Скопировать ссылку «Базовое использование» Скопировано

На базовом уровне использовать Webpack довольно просто. Представим, что в нашем приложении есть файл application.js с функциями, необходимыми для работы:
```
 function sayHello()  console.log('Hello!')> function sayBye()  console.log('Bye!')> // Экспортируем эти функции,// чтобы воспользоваться ими в другом месте:export function sayHello()  console.log('Hello!') > function sayBye()  console.log('Bye!') > // Экспортируем эти функции, // чтобы воспользоваться ими в другом месте: export  sayHello, sayBye >      
```
Теперь создадим файл index.js, который будет использоваться как входная точка, и вызовем в нем функции приложения:
```
 import < sayHello, sayBye >from './application' sayHello()sayBye() import  sayHello, sayBye > from './application' sayHello() sayBye()      
```
Входная точка — файл, с которого начинается исполнение программы. Обычно в нём содержится логика старта приложения.

Настроим Webpack, чтобы он собирал единый файл с кодом приложения.

Для начала следует добавить Webpack в список зависимостей приложения:
```
 npm install --dev webpack webpack-cli npm install --dev webpack webpack-cli     
```
webpack — основная зависимость, в которой хранится весь код, нужный для работы бандлера.

webpack — cli — обёртка для запуска Webpack из командной строки, Command Line Interface.

Теперь достаточно создать простой конфигурационный файл webpack.config.js:
```
 // path — встроенный в Node.js модульconst path = require('path') module.exports =  // Указываем путь до входной точки: entry: './src/index.js', // Описываем, куда следует поместить результат работы: output:  // Путь до директории (важно использовать path.resolve): path: path.resolve(__dirname, 'dist'), // Имя файла со сборкой: filename: 'bundle.js' >> // path — встроенный в Node.js модуль const path = require('path') module.exports =  // Указываем путь до входной точки: entry: './src/index.js', // Описываем, куда следует поместить результат работы: output:  // Путь до директории (важно использовать path.resolve): path: path.resolve(__dirname, 'dist'), // Имя файла со сборкой: filename: 'bundle.js' > >      
```
Почти готово, осталось только добавить скрипт для сборки в package.json и вызвать его:
```
  "scripts":  "build": "webpack" >>  "scripts":  "build": "webpack" > >      
```
```
 npm run build npm run build     
```
После выполнения в директории dist окажется файл bundle.js, который уже можно подключать на страницу в браузере.

В корне проекта нужно создать папку src, а в ней файл index.html и подключить в него файл со сборкой:
```
     .   .    DOCTYPE html> html> head> . head> body> . script src="./dist/bundle.js"> script> body> html>      
```
Если открыть этот файл в браузере, то в консоли появится приветствие и прощание.

Отслеживание изменений в проекте

Скопировать ссылку «Отслеживание изменений в проекте» Скопировано

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

Для решения этой проблемы можно воспользоваться режимом инкрементальной сборки, когда Webpack отслеживает изменения файлов с исходным кодом и автоматически собирает те части, которые изменились.

Добавим новую команду в package.json:
```
  "scripts":  "build": "webpack", "watch": "webpack --watch" >>  "scripts":  "build": "webpack", "watch": "webpack --watch" > >      
```
Теперь достаточно открыть файл index.html в браузере и обновлять страницу после сохранения файлов с исходным кодом.

Для большего удобства можно воспользоваться пакетом webpack-dev-server.

Расширение

Скопировать ссылку «Расширение» Скопировано

Webpack — невероятно мощный инструмент, в первую очередь за счёт своей расширяемости. В базовом случае он только собирает несколько JS-файлов в один, но с помощью лоадеров и плагинов можно сильно изменить его функциональность.

Webpack начинает свою работу со входной точки — первого JS-файла. В нём он находит все импорты, по которым собирает файлы с исходным кодом проекта. Во всех найденных файлах снова ищет импорты, и так далее, пока импорты не закончатся. В итоге у Webpack оказывается список всех файлов проекта и информация, как эти файлы связаны. Затем в дело вступают плагины и лоадеры. Для каждого файла Webpack найдёт все подходящие по конфигурации лоадеры и обработает ими файл.

Плагины — это более глобальный способ изменить поведение сборщика. В процессе сборки Webpack будет вызывать специальную функцию в каждом плагине, передавая в неё текущий контекст сборки и API для изменения этого контекста.

Обратная сторона расширяемости Webpack — сложность его конфигурации. В больших проектах файл с настройками сборки может занимать тысячи строк. Часто такую конфигурацию разбивают на несколько файлов, чтобы её было проще читать.

Лоадеры

Скопировать ссылку «Лоадеры» Скопировано

Лоадер — это функция, которая принимает содержимое какого-то файла и должна вернуть изменённое содержимое.

Например, ts — loader превратит любой TypeScript-код в обыкновенный JavaScript-код.

Для Webpack написано огромное число лоадеров — для работы со стилями, с разными языками, для обработки изображений и для многого другого. Вот несколько, которые можно встретить почти в любом проекте:
- style — loader — импортирует CSS-файлы и внедряет стили в DOM.
- css — loader — позволяет работать с @import и url ( ) внутри CSS.
- babel — loader — позволяет писать код на современном JS, но исполнять его даже в старых браузерах.
Чтобы добавить новый лоадер, нужно расширить файл webpack.config.js:
```
 module.exports =  // В этом массиве будут перечислены все применяемые лоадеры: module:  rules: [  // Это правило будет применяться ко всем файлам, // имя которых подойдет под регулярное выражение: test: /\.css$/, // Список лоадеров, которые применятся к файлу: use: [ < loader: 'style-loader' >,  loader: 'css-loader', // Лоадеру можно передать параметры: options: > ] > ] >> module.exports =  // В этом массиве будут перечислены все применяемые лоадеры: module:  rules: [  // Это правило будет применяться ко всем файлам, // имя которых подойдет под регулярное выражение: test: /\.css$/, // Список лоадеров, которые применятся к файлу: use: [  loader: 'style-loader' >,  loader: 'css-loader', // Лоадеру можно передать параметры: options:  modules: true > > ] > ] > >      
```
Плагины

Скопировать ссылку «Плагины» Скопировано

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

Для Webpack написано огромное количество плагинов — для работы со стилями, повышения удобства разработки и упрощения жизни инженеров, для автоматизации рутинных операций и много других. Вот несколько, которые можно встретить почти в любом проекте:
- MiniCssExtract Plugin — по умолчанию все стили, которые обработал Webpack, попадают в JS-файл и потом вставляются в тег . Этот плагин извлекает все стили в отдельный CSS-файл, который можно подключить к странице через тег .
- HotModuleReplacement Plugin — позволяет делать изменения в коде и видеть изменения в браузере без полной перезагрузки страницы, это делает разработку более комфортной.
- CompressionWebpack Plugin — сжимает все ресурсы, сгенерированные Webpack, чтобы передавать пользователям по сети меньший объём данных.
Чтобы добавить новый плагин в сборку, нужно расширить файл webpack.config.js:
```
 // Webpack предоставляет несколько плагинов в основном пакете:const < ProgressPlugin >= require('webpack') module.exports =  plugins: [ // При сборке этот плагин будет отображать прогресс в консоли: new ProgressPlugin() ]> // Webpack предоставляет несколько плагинов в основном пакете: const  ProgressPlugin > = require('webpack') module.exports =  plugins: [ // При сборке этот плагин будет отображать прогресс в консоли: new ProgressPlugin() ] >      
```
На практике

Скопировать ссылку «На практике» Скопировано

Игорь Камышев советует

Скопировать ссылку «Игорь Камышев советует» Скопировано

�� На практике не очень удобно вручную создавать HTML-файлы и подключать туда сборки, сгенерированные Webpack — ведь количество и имена файлов могут меняться в зависимости от сборки. Для автоматизации часто используют HtmlWebpackPlugin.

В первую очередь, нужно установить пакет с плагином в проект:
```
 npm install --save-dev html-webpack-plugin npm install --save-dev html-webpack-plugin     
```
```
 const < HtmlWebpackPlugin >= require('html-webpack-plugin') module.exports =  plugins: [new HtmlWebpackPlugin()]> const  HtmlWebpackPlugin > = require('html-webpack-plugin') module.exports =  plugins: [new HtmlWebpackPlugin()] >      
```
При сборке плагин сгенерирует пустой index.html в папку с собранным проектом и добавит туда ссылки на финальные JS- и CSS-файлы. При необходимости плагин можно кастомизировать.

�� path — это встроенный в Node.js модуль для работы с путями. Чтобы не беспокоиться об особенностях разных операционных систем, лучше всегда при работе с путями в файловой системе использовать модуль path.

Например, в разных операционных системах используется разный разделитель путей — косая черта / или обратная косая черта \ .

В нём есть несколько полезных для конфигурации Webpack функций:
- path . resolve — функция, которая принимает любое число сегментов пути и возвращает абсолютный путь. Работает так:
```
 path.resolve('/foo/bar', './baz')// '/foo/bar/baz'path.resolve('/foo/bar', '/tmp/file/')// '/tmp/file' // Если текущая рабочая директория /home/user:path.resolve('www', 'static_files/png', '../gif/image.gif')// '/home/user/www/static_files/gif/image.gif' path.resolve('/foo/bar', './baz') // '/foo/bar/baz' path.resolve('/foo/bar', '/tmp/file/') // '/tmp/file' // Если текущая рабочая директория /home/user: path.resolve('www', 'static_files/png', '../gif/image.gif') // '/home/user/www/static_files/gif/image.gif'      
```
- path . sep — строка разделителя путей в текущем окружении ( / или \ ).
- path . extname — функция, которая принимает строку с именем файла и возвращает расширение этого файла.
Как собрать проект на Webpack

Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.

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

Подготовка

Для начала установите Node.js с официального сайта https://nodejs.org, если у вас его ещё нет. Затем создайте новую папку для проекта и перейдите в нее с помощью командной строки или терминала. В нашем случае это папка two_numbers , но у вас может быть любая другая.
```
mkdir two_numbers cd two_numbers 
```
Инициализация проекта

Находясь внутри папки, инициализируйте проект с помощью следующей команды:
```
npm init -y 
```
Эта команда создаст файл package.json , который является основным файлом для управления зависимостями и настройками проекта на Node.js.

Параметр -y означает, что все вопросы, которые обычно задаются при создании файла package.json , будут пропущены, и будут использованы значения по умолчанию. В результате будет создан файл package.json с минимальными настройками, без дополнительного ввода со стороны пользователя.

Он выглядит примерно так:
```
< "name": "two_numbers", "version": "1.0.0", "description": "", "main": "index.js", "scripts": < "start": "webpack serve", "build": "webpack" >, "keywords": [], "author": "", "license": "ISC", "devDependencies": < "css-loader": "^6.7.3", "style-loader": "^3.3.2", "webpack": "^5.78.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.13.2" >> 
```
Установка webpack, webpack-cli и webpack-dev-server

Установите webpack , webpack-cli и webpack-dev-server с помощью следующей команды:
```
npm install webpack webpack-cli webpack-dev-server --save-dev 
```
Команда webpack-cli позволит запускать Webpack из терминала.

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

О ключе —save-dev мы уже писали в одной из статей журнала.

Установка css-loader и style-loader

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

css-loader позволяет Webpack обрабатывать и импортировать CSS в JavaScript-файлы. Он интерпретирует @import и url() как import/require() и разрешает их. В результате, после обработки css-loader , ваш CSS будет представлен в виде строки в JavaScript-коде.

style-loader . Поскольку после обработки css-loader ваш CSS превратился в строку JavaScript, style-loader используется для внедрения этих стилей в DOM. style-loader добавляет тег внутри вашего HTML-файла, содержащий все стили, включенные в сборку.

Таким образом, чтобы импортировать CSS в наш проект, нам нужно установить style-loader и css-loader . Для этого выполните следующую команду:
```
npm install style-loader css-loader --save-dev 
```
Установка html-webpack-plugin

html-webpack-plugin автоматически генерирует HTML-файл на основе шаблона, вставляет туда ссылки на ваши файлы (например, JavaScript и CSS), и сохраняет его в указанной директории (обычно в папке dist )
```
npm install html-webpack-plugin --save-dev 
```
C подготовкой и установкой закончили, теперь переходим к структуре проекта и коду.

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

Для удобства откройте папку с проектом прямо в VS Code через меню Файл→Открыть папку (File→Open Folder). В итоге слева будет находиться структура проекта и все файлы, а справа вы будете их редактировать.

В корне проекта создайте пустой файл webpack.config.js и добавьте туда следующий код базовой конфигурации проекта. Обратите внимание на поясняющие комментарии.
```
const path = require('path'); // Импортируем модуль "path" для работы с путями файлов const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = < entry: './src/index.js', // Точка входа для сборки проекта output: < filename: 'bundle.js', // Имя выходного файла сборки path: path.resolve(__dirname, 'dist'), // Путь для выходного файла сборки >, module: < rules: [ < test: /\.css$/, // Регулярное выражение для обработки файлов с расширением .css use: ['style-loader', 'css-loader'], // Загрузчики, используемые для обработки CSS-файлов >, ], >, plugins: [ new HtmlWebpackPlugin(< template: './src/index.html', >), ], devServer: < static: < directory: path.join(__dirname, 'dist'), // Каталог для статики >, open: true, // Автоматически открывать браузер >, mode: 'development', // Режим сборки >; 
```
В файле package.json измените поле scripts на следующее:
```
"scripts": < "start": "webpack serve", "build": "webpack" >, 
```
Это позволит запускать сервер разработки и сборку проекта с помощью кратких и удобных команд npm start и npm run build , вместо того чтобы вводить полные команды в терминал каждый раз.

Теперь создайте внутри проекта папку src , а в ней пустой файл index.js . В этом файле напишем основной код приложения, которое складывает два числа из текстовых полей.
```
function addNumbers() < const num1 = parseFloat(document.getElementById("number1").value); const num2 = parseFloat(document.getElementById("number2").value); const result = num1 + num2; document.getElementById("result").innerText = `Result: $`; > document.getElementById("calculate").addEventListener("click", addNumbers); 
```
Теперь создайте в той же папке файл index.html и добавьте туда этот код:
```
     Калькулятор сложения       
```
В папке src создайте файл styles.css и добавьте следующий код:
```
body < display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; >input, button, p
```
Итоговая структура проекта после всех действий будет выглядеть так:

Теперь ваш проект готов к использованию. Для запуска сервера разработки выполните следующую команду в терминале:
```
npm start 
```
Webpack автоматически откроет браузер, и вы увидите страницу с текстовыми полями для ввода чисел и кнопкой Add. Также после запуска сервера вы можете перейти по адресу localhost:8082 .

В открывшемся окне ведите два числа и нажмите кнопку Add для выполнения сложения. Результат будет отображаться под кнопкой. Готово!

Так зачем использовать Webpack

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

В этом примере мы использовали только базовые возможности Webpack, но с его помощью вы можете сделать гораздо больше, например, обрабатывать и минифицировать CSS, использовать различные загрузчики (loaders) и плагины для транспиляции и оптимизации кода.

Если хотите лучше разобраться в Webpack, записывайтесь на курс — там узнаете все подробности и научитесь использовать Webpack как профи.

Дальше
- Что такое Webpack
- Как копировать статические файлы с помощью Webpack
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Dev Mode в Figma. Быстрый обзор бета-версии

Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.

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

Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.
- 10 августа 2023
Горячие клавиши Figma для быстрой работы

Figma — это инструмент для создания дизайна, который очень любят веб-разработчики. Одна из причин, почему Figma так популярна — это горячие клавиши. Они помогают работать быстрее и проще. Давайте рассмотрим самые важные из них.

Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)

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

Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)

Эта комбинация клавиш открывает поиск по меню. Это очень удобно, когда вы знаете, что вам нужно, но не помните, где это находится. Просто начните вводить то, что вы ищете, и Figma покажет вам нужный пункт меню. Если пользуетесь Spotlight или PowerToys, вам будет очень удобно.

А если не пользуетесь — попробуйте.
- 7 августа 2023
Старт в Figma для верстальщика

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.

Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.
- 2 августа 2023
Инструменты для работы со шрифтами

Работа со шрифтами и типографикой — важная часть вёрстки текста. Новые шрифты появляются очень часто, за этим сложно уследить. Существует множество инструментов, которые помогают находить нужные шрифты, управлять ими и улучшать внешний вид текста.

Рассмотрим несколько инструментов для работы со шрифтами, которые будут полезны при создании сайта.
- 29 июня 2023
10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.
- 13 июня 2023
10 лучших тем для VS Code

VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.
- 11 июня 2023
10 полезных плагинов VS Code для вёрстки

Visual Studio Code — один из самых популярных редакторов кода. Его удобно использовать, и у него есть множество полезных расширений, с помощью которых легко оптимизировать работу. Такие плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы.

Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.
- 9 июня 2023
17 полезных плагинов JavaScript в VS Code

Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.

Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.
- 6 июня 2023
Подборка микроанимаций для фронтенда с CodePen в 2023

⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.

Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.
- 12 апреля 2023
Webpack: инструкция по применению

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

Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование плагина CopyWebpackPlugin . Рассмотрим подробнее, как это делать.

CopyWebpackPlugin позволяет скопировать файлы из одного каталога в другой, сохраняя их иерархию. Для начала установите CopyWebpackPlugin в свой проект:
```
npm install copy-webpack-plugin --save-dev 
```
После установки настройте конфигурацию Webpack, добавив новый экземпляр плагина в секцию plugins конфига. Пример:
```
const CopyWebpackPlugin = require('copy-webpack-plugin'); const path = require('path'); module.exports = < // ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: path.resolve(__dirname, 'src/assets'), to: path.resolve(__dirname, 'dist/assets') >] >) ] >; 
```
В плагине содержится массив объектов patterns . Каждый объект patterns указывает на исходный файл или каталог назначения, куда копировать файлы. В примере указано, что нужно скопировать все файлы из каталога src/assets в dist/assets во время сборки.

Теперь все статические файлы будут скопированы в каталог сборки при запуске команды npm run build или той, которую вы используете для запуска сборки.

�� Научитесь работать с webpack и сократите время на разработку, сборку и тестирование проекта.

Копирование нескольких файлов

Для копирования нескольких файлов с помощью плагина CopyWebpackPlugin добавляем каждый каталог или файл в отдельный объект-шаблон в массиве patterns .

Каждый объект-шаблон содержит свойство from , оно указывает путь к файлу или каталогу для копирования. Свойство to — это путь, по которому нужно скопировать файлы или каталоги.
```
const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = < //ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: 'src/images', to: 'dist/images' >, < from: 'src/index.html', to: 'dist' >, ], >), ], >; 
```
В примере первый объект-шаблон копирует каталог images из src в dist/images , а второй — копирует файл index.html из src в dist . Добавляйте столько объектов-шаблонов, сколько нужно для копирования всех необходимых файлов и каталогов.

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

Другие способы

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

Лоадер file-loader позволяет копировать статические файлы в указанную папку при сборке проекта. Чтобы использовать file-loader , установите его с помощью npm :
```
npm install file-loader --save-dev 
```
Затем добавьте его в конфигурационный файл webpack.config.js :
```
module.exports = < // . ваша конфигурация webpack . module: < rules: [ < test: /\.(png|jpe?g|gif)$/i, use: [ < loader: 'file-loader', options: < name: '[name].[ext]', outputPath: 'images/', >, >, ], >, ], >, >; 
```
В этом примере file-loader используется для копирования файлов изображений в каталог images внутри каталога сборки.

Лоадер url-loader работает аналогично file-loader , но может преобразовывать маленькие файлы в Data URL, вместо копирования их в каталог сборки. Это может быть полезно для уменьшения количества запросов к серверу.

Для использования url-loader необходимо его установить:
```
npm install url-loader --save-dev 
```
Затем добавить в конфигурационный файл webpack.config.js :
```
module.exports = < module: < rules: [ < test: /\.(png|jpg|gif)$/i, use: [ < loader: 'url-loader', options: < limit: 8192, >, >, ], >, ], >, >; 
```
Поместите файлы, которые хотите скопировать, в соответствующий каталог в вашем проекте, например, в папку src/images . Если размер файла меньше 8 кБ, он будет встроен в виде Data URL. При сборке проекта все файлы будут обработаны и скопированы.

Описанные лоадеры ещё используются в разработке, но рекомендуем ознакомиться с новой версией Webpack и её обновлениями.
- 30 марта 2023
Что такое Webpack?

Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей.

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

Он также способен выполнять множество иных операций:
- помогает собрать воедино ваши ресурсы
- следит за изменениями и повторно выполняет задачи
- может выполнить транспиляцию JavaScript следующего поколения до более старого стандарта JavaScript (ES5) с помощью Babel, что позволит использовать новейшие функции JavaScript, не беспокоясь о том, поддерживает их браузер или нет
- может выполнить транспиляцию CoffeeScript в JavaScript
- может конвертировать встроенные изображения в data:URI
- позволяет использовать require() для CSS файлов
- может запустить webpack-dev-server (в нём встроен локальный сервер и livereload (“живая перезагрузка браузера”))
- может работать с Hot Module Replacement (замена горячего модуля)
- может разделить выходной файл (output file) на несколько файлов, чтобы избежать медленной загрузки страницы из-за большого размера JS-файла
- может выполнить Tree Shaking
Webpack не ограничивается одним лишь фронтендом, его также успешно применяют в бэкенд разработке на Node.js.

У Webpack есть предшественники, у которых он перенял многие идеи. Основное различие заключается в том, что те инструменты известны как task runners (такс-раннеры), в то время как Webpack ничто иное, как сборщик модулей.

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

Установка Webpack

Webpack может быть установлен глобально или локально для каждого проекта.

Глобальная установка

Глобальная установка с помощью Yarn:
```
yarn global add webpack webpack-cli
```
```
npm i -g webpack webpack-cli
```
Теперь мы можем запустить webpack:
```
webpack-cli
```
Локальная установка

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

Установка с помощью Yarn:
```
yarn add webpack webpack-cli -D
```
```
npm i webpack webpack-cli --save-dev
```
После этого добавьте эти строчки в свой package.json файл:
```
 < 
//. 
"scripts": < 
"build": "webpack" 
> 
>
```
Как только все будет сделано, вы можете запустить Webpack, набрав:
```
yarn build
```
в корневом каталоге проекта.

Настройка Webpack

По умолчанию, Webpack (начиная с 4-й версии) не требует никакой настройки, если вы соблюдаете эти правила:
- точкой входа вашего приложения является ./src/index.js
- вывод (output) размещается в ./dist/main.js
- Webpack работает в production mode (режим производства)
Конечно, если понадобится, вы сможете настроить каждую мельчайшую деталь в Webpack. Конфигурационный файл Webpack — webpack.config.js хранится в корневой директории проекта.

Точка входа

По умолчанию, точкой входа является ./src/index.js . Нижеприведенный пример использует файл ./index.js в качестве входной точки.
```
module.exports = /*. */ 
entry: './index.js' 
/*. */
>
```
Вывод (output)

По умолчанию, вывод размещается в ./dist/main.js . В нижеприведенном примере, результат работы в Webpack генерируется в файле app.js :
```
module.exports = /*. */ 
output: path: path.resolve(__dirname, 'dist'), 
filename: 'app.js' 
> 
/*. */
>
```
С помощью Webpack можно использовать оператор import или require в своем JavaScript коде для того, чтобы подключать файлы любого типа (например, CSS).

В Webpack загрузчики являются аналогами задач (tasks) в Grunt и Gulp. Они принимают содержимое файлов, а затем преобразуют его необходимым образом и включают результат преобразования в общую сборку. Например, они могут компилировать TypeScript, загружать компоненты Vue.js и многое другое.

Например, в своем коде вы можете использовать:
```
import 'style.css' 
```
указав конфигурацию данного загрузчика в файле webpack.config.js :
```
module.exports = /*. */ 
module: rules: [ 
< test: /\.css$/, use: 'css-loader' >, 
>] 
> 
/*. */
>
```
Регулярное выражение применяет данный загрузчик только к CSS файлам.

У загрузчика есть параметры:
```
module.exports = /*. */ 
module: rules: [ 
 test: /\.css$/, 
use: [ 
 loader: 'css-loader', 
options: modules: true 
> 
> 
] 
> 
] 
> 
/*. */
>
```
Для одной и той же задачи может потребоваться несколько загрузчиков:
```
module.exports = /*. */ 
module: rules: [ 
 test: /\.css$/, 
use: 
[ 
'style-loader', 
'css-loader', 
] 
> 
] 
> 
/*. */
>
```
В этом примере css-loader интерпретирует директиву import ‘style.css’ в CSS. Затем style-loader внедряет этот CSS в DOM, используя тег .

Порядок выполнения перевернут (последнее выполняется первым).

Так сколько всего существует загрузчиков? Очень много! Здесь вы сможете найти полный список.

Самым часто используемым загрузчиком является Babel — он используется для транспиляции современного JavaScript в ES5:
```
module.exports = /*. */ 
module: rules: [ 
 test: /\.js$/, 
exclude: /(node_modules|bower_components)/, 
use: loader: 'babel-loader', 
options: presets: ['@babel/preset-env'] 
> 
> 
> 
] 
> 
/*. */
>
```
Данный пример заставляет Babel предварительно обрабатывать все наши React/JSX файлы:
```
module.exports = /*. */ 
module: rules: [ 
 test: /\.(js|jsx)$/, 
exclude: /node_modules/, 
use: 'babel-loader' 
> 
] 
>, 
resolve: extensions: [ 
'.js', 
'.jsx' 
] 
> 
/*. */
>
```
Здесь вы можете увидеть параметры babel-loader .

Плагины

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

Рассмотрим следующий пример:
```
module.exports = /*. */ 
plugins: [ 
new HTMLWebpackPlugin() 
] 
/*. */
>
```
Плагин HTMLWebpackPlugin автоматически создает HTML-файл с уже подключенным скриптом.

Здесь доступно множество плагинов.

Еще один полезный плагин, CleanWebpackPlugin , мы можем использовать перед перегенерацией файлов, чтобы очистить нашу папку dist/ и получить аккуратный файл с конфигурацией.
```
module.exports = /*. */ 
plugins: [ 
new CleanWebpackPlugin(['dist']), 
] 
/*. */
>
```
Режимы Webpack

Данные режимы (появившиеся в 4-й версии Webpack) настраивают среду, в которой будет работать Webpack. Режим может быть настроен на development или production (по умолчанию стоит production ).
```
module.exports = entry: './index.js', 
mode: 'development', 
output: path: path.resolve(__dirname, 'dist'), 
filename: 'app.js' 
>
>
```
- менее оптимизирован, чем production
- работает быстрее
- не удаляет комментарии
- предоставляет более подробные сообщения об ошибках и способы их решения
- сильно облегчает отладку
Режим production работает медленнее, чем development , так как ему нужно создать более оптимизированный бандл. Полученный JavaScript файл меньше по размеру, поскольку многое из режима development в нем отсутствует.

Я написал небольшое приложение, которое выводит содержимое console.log .

Вот бандл production :

Вот бандл development :

Запуск Webpack

Если Webpack установлен глобально, его можно вручную запустить из командной строки. Но, обычно, вы прописываете скрипт внутри файла package.json , который затем запускаете через npm или yarn .

Например, эти package.json скрипты, которые мы использовали ранее:
```
"scripts": "build": "webpack"
>
```
позволяют запускать webpack , набрав:
```
npm run build
```
```
yarn run build
```
```
yarn build
```
Просмотр изменений

Webpack может автоматически перестраивать бандл, когда в вашем приложении происходят изменения. Для этого добавьте данный скрипт:
```
"scripts": "watch": "webpack --watch"
>
```
и запустите данную функцию:
```
npm run watch
```
```
yarn run watch
```
```
yarn watch
```
Одной из приятных особенностей watch mode (режима просмотра) является то, что бандл изменяется только в том случае, если в сборке нет ошибок. Если ошибки присутствуют, watch продолжит следить за изменениями и будет пытаться перестраивать бандл, но текущий, рабочий бандл не зависит от проблемных бандлов.

Обработка изображений

С помощью Webpack можно очень удобно работать с изображениями, используя загрузчик file-loader .

Эта простая конфигурация:
```
module.exports = /*. */ 
module: rules: [ 
 test: /\.(png|svg|jpg|gif)$/, 
use: [ 
'file-loader' 
] 
> 
] 
> 
/*. */
>
```
Позволяет импортировать изображения в ваш JavaScript:
```
import Icon from './icon.png'const img = new Image()
img.src = Icon
element.appendChild(img)
```
Где img — это HTMLImageElement. Ознакомьтесь с документацией по Image().

file-loader может обрабатывать и другие типы ассетов, например, шрифты, CSV-файлы, XML и т.д.

Еще одним приятным инструментом для работы с изображениями является url-loader загрузчик.

В этом примере загружается любой PNG-файл размером менее 8 КБ в качестве data:URL.
```
module.exports = /*. */ 
module: rules: [ 
 test: /\.png$/, 
use: [ 
 loader: 'url-loader', 
options: limit: 8192 
> 
> 
] 
> 
] 
> 
/*. */
>
```
Обработайте SASS код и преобразуйте его в CSS

Используйте sass-loader , css-loader и style-loader :
```
module.exports = /*. */ 
module: rules: [ 
 test: /\.scss$/, 
use: [ 
'style-loader', 
'css-loader', 
'sass-loader' 
] 
> 
] 
> 
/*. */
>
```
Генерация Source Maps

С транспилированным кодом, зачастую, возникают проблемы при отладке кода в браузере или анализе ошибок. Так как транспилированный и трудночитаемый JavaScript, а не оригинальный код, затрудняет поиск и исправление ошибок. Source Map — это JSON-файл, который содержит информацию о том, как транспилировать код обратно в исходный код.

Source Maps можно сгенерировать, используя свойство конфигурации devtool :
```
module.exports = /*. */ 
devtool: 'inline-source-map', 
/*. */
>
```
devtool имеет множество возможных значений, из которых наиболее часто используемые:
- none : не добавляет Source Maps
- source-map : идеально подходит для режима production , предоставляет отдельную Source Map, которую можно свернуть и добавляет ссылку в бандл, чтобы инструменты разработки знали о том, что Source Map доступна
- inline-source-map : идеально подходит для режима development , встраивает Source Maps в качестве data:URL
Webpack

Webpack — это самый популярный на сегодняшний день сборщик модулей (bundler) для JavaScript-приложений , предоставляющий широкие возможности для тонкой настройки процесса сборки приложения.

Файл с настройками, обычно, носит название webpack.config.js и экспортируется в виде CommonJS-модуля :
```
// webpack.config.js module.exports =   // config > 
```
Для сборки требуется установить webpack и webpack-cli и выполнить команду webpack .

Команды и флаги Webpack CLI

Основные команды
- serve — запуcкает сервер для разработки ( webpack-dev-server )
- watch — запускает вебпак и следит за изменениями файлов
Основные флаги
- —entry — входная точка приложения (см. ниже), например: webpack —entry ./src/index.js
- —config, -c — путь к файлу с настройками, например: webpack -c ./config/webpack.dev.js
- —merge, -m — объединение двух и более файлов с настройками, например: webpack -c ./webpack.common.js -c ./webpack.dev.js -m
- —progress — отображение прогресса сборки, например: webpack —progress
- —output-path, -o — директория для сборки (см. ниже), например: webpack -o ./build
- —watch, -w — наблюдение за файлами, например: webpack -w ./app.js
- —hot, -h — включает «горячую» замену модулей (hot modules replacement)
- —devtool, -d — управление созданием карт ресурсов (source maps)
- —mode — режим сборки, например: webpack —mode=development
- —analyze — вызов webpack-bundle-analyzer для получения информации о сборке, например: webpack —analyze
Настройки

mode

mode определяет режим сборки. Режим, в свою очередь, определяет, какие инструменты вебпак будет использовать для генерации «бандла». Это могут быть, например, инструменты для минимизации и оптимизации кода (при производственном режиме).
```
mode: 'development' // или mode: 'production' 
```
context

context определяет контекст сборки — основную директорию, абсолютный путь для разрешения входных точек и загрузчиков. Используется редко.
```
context: path.resolve(__dirname, 'src') 
```
entry

entry определяет входную точку (точки) приложения. Входная точка — это основной JS-файл, в котором импортируются модули приложения. Значением entry может быть строка, массив, объект или функция. По умолчанию, имеет значение index.js .
```
entry: path.resolve(__dirname, 'src/app.js') // или entry: ['./app.js', './test.js'] // или // названия файлов сборки entry:   app: './app.js', home: import: './home.js', filename: 'pages/[name][ext]'>, about: import: './about.js', filename: 'pages/[name][ext]'> > // или // зависимости entry:   app: import: './app.js', dependOn: 'react-vendors'>, 'react-vendors': ['react', 'react-dom', 'prop-types'] > 
```
output

output определяет директорию, в которую помещаются файлы сборки. Значением output может быть строка или объект. По умолчанию, имеет значение dist .
```
output: path.resolve(__dirname, 'build') // или output:   // основные // очистка директории перед повторной сборкой // замена clean-webpack-plugin clean:   // сохранение файлов keep: /\ignored\/dir\// >  // названия файлов // development filename: '[name].bundle.js', // production filename: '[name].[contenthash].bundle.js'  // путь к директории path: path.resolve(__dirname, 'build'),  // путь к файлам в index.html - относительный или абсолютный publicPath: './',  // дополнительные // загрузка "чанков" из разных источников crossOriginLoading: 'anonymous',  // экспериментальная возможность // к скриптам добавляется type="module" module: true,  // возможности JS, которые могут использоваться в генерируемых файлах environment:   arrowFunction: true, bigIntLiteral: false, const: true, destructuring: true, dynamicImport: false, forOf: true > > 
```
resolve

resolve определяет порядок разрешения модулей. Значением resolve является объект.
```
resolve:   // основные // синонимы для импорта (import, require) // файл src/components/Home.js можно импортировать так: // import Home from '@/Home' alias:   '@': path.resolve(__dirname, 'src/components') >,  // файлы src/utilities/format.js и src/templates/layout.js можно импортировать так: // import < format, layout >from '_' alias:   _: [  path.resolve(__dirname, 'src/utilities/'),  path.resolve(__dirname, 'src/templates/') ] >,  // расширения модулей extensions: [ '.mjs', '.js', '.jsx', '.ts', '.tsx', '.vue', '.json' ],  // дополнительные // название файла, используемое при разрешении директории // по умолчанию index mainFiles: ['main'],  // директория с модулями // по умолчанию node_modules modules: ['app_modules'] >, 
```
Только для development-режима

devtool

devtool определяет стиль карт ресурсов (source maps), т.е. способ их создания.
```
// оптимальный вариант // с точки зрения скорости и содержательности devtool: 'eval-cheap-source-map' 
```
devServer

devServer определяет настройки для webpack-dev-server (сервера для разработки). Сервер запускается командой serve .
```
devServer:   // основные // gzip-сжатие обслуживаемых (served) файлов compress: true,  // директория с файлами для обслуживания // строка или массив contentBase: path.resolve(__dirname, 'public'), // или contentBase: [  path.resolve(__dirname, 'public'),  path.resolve(__dirname, 'assets'), ],  // вместо ошибки 404 (запрашиваемая страница отсутствует), // возвращается index.html historyApiFallback: true,  // "горячая" замена модулей // требуется webpack.HotModuleReplacementPlugin hot: true,  // открыть браузер после начала обслуживания файлов open: true, // или open:   app: ['Google Chrome', '--incognito', '--other-flags'] >,  // порт port: 3000,  // дополнительные // уровень сообщений, выводимых в консоль браузера clientLogLevel: 'silent',  // перенаправление запросов proxy:   '/api': 'http://localhost:5000' >,  // осуществляется сборка обслуживаемых файлов // файлы помещаются в директорию, указанную в output.path // при повторной сборке могут возникнуть проблемы, // связанные с тем, что целевая директория не является пустой writeToDisk: true > 
```
Только для production-режима

optimization

optimization определяет оптимизацию сборки. Все необходимые оптимизации выполняются вебпаком автоматически (минимизация, разделение кода на части, создание распределенного, совместно используемого кода и т.д.).
```
optimization:   // создание распределенного файла времени выполнения (runtime) runtimeChunk: 'single' > 
```
perfomance

perfomance позволяет накладывать ограничения на размер генерируемых файлов.
```
performance:   // подсказки hints: 'warning', // максимальный размер входной точки в байтах // по умолчанию 250000 maxEntrypointSize: 512000, // максимальный размер статических ресурсов // по умолчанию 250000 maxAssetSize: 512000 > 
```
Опциональные

watch

watch включает режим наблюдения за файлами. Это означает, что после сборки вебпак будет следить за изменениями.
```
// по умолчанию false watch: true 
```
watchOptions

watchOptions определяет настройки режима наблюдения.
```
watchOptions:   // осуществлять повторную сборку через секунду после обнаружения изменений aggregateTimeout: 1000, // игнорируемые файлы или директории ignored: /node_modules/, // проверять файлы на наличие изменений каждую секунду poll: 1000 > 
```
externals

externals определяет внешние ресурсы. Данные ресурсы не включаются в сборку. В основном, используется при разработке библиотек.
```
externals:   react: 'react', lodash:   commonjs: 'lodash', amd: 'lodash', root: '_', // глобальная переменная > > 
```
experiments

experiments определяет экспериментальные возможности сборки.
```
experiments:   // разрешает использовать await без async topLevelAwait: true,  // к скриптам добавляется type="modules" // используется совместно с output.module outputModule: true > 
```
module

По умолчанию вебпак умеет работать только с JS и JSON-файлами. Для обработки других файлов требуются loaders («лоадеры», загрузчики). Такие загрузчики определяются в module.rules . module.rules имеет следующий формат:
```
module:   rules: [   // регулярное выражение для поиска файлов, // подлежащих преобразованию // CSS и SASS-файлы (.css, .scss или .sass) // без учета регистра test: /\.(c|sa|sc)ss$/i,  // игнорируемые директории exclude: /node_modules/,  // целевые директории // используется редко include: /app_modules/,  // несколько загрузчиков // загрузчики применяются снизу вверх, // т.е. от последнего к первому use: [ 'style-loader',   loader: 'css-loader', options:   // количество предшествующих загрузчиков importLoaders: 1 > >, 'sass-loader' ], >  // или // один загрузчик // сокращение для use: [ < loader >]   loader: 'css-loader', options:   modules: true > >,  // для обработки статических ресурсов достаточно указать type: 'asset'   test: /\.(jpe?g|png|gif|svg|eot|ttf|woff?2)$/i, type: 'asset' > ] > 
```
loaders

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

Стилизация
- `style-loader` — применение сгенерированных `css-loader` стилей к DOM
- `css-loader` — преобразование CSS, включая `@import` и `url()`
- `sass-loader`
- `less-loader`
Транспиляция
- `babel-loader` — преобразование «нового» JS и JSX в «старый» JS
- `ts-loader` — преобразование TypeScript в JavaScript
Шаблонизация
- `html-loader` — экспорт HTML в виде строки
- `markdown-loader` — преобразование MD в HTML
- `react-markdown-loader` — преобразование MD в React-компоненты без состояния
Фреймворки
- `vue-loader` — загрузка и компиляция Vue-компонентов
- `angular2-template-loader` — загрузка и компиляция Angular-компонентов
Пример применения загрузчиков
```
const babelLoader =   loader: 'babel-loader', options:   presets: ['@babel/preset-env', '@babel/preset-react'], plugins: ['@babel/plugin-proposal-class-properties'] > > module.exports =   // . module:   rules: [ // JavaScript, React   test: /\.m?jsx?$/i, exclude: /node_modules/, use: babelLoader >, // TypeScript   test: /.tsx?$/i, exclude: /node_modules/, use: [babelLoader, 'ts-loader'] >, // CSS, SASS   test: /\.(c|sa|sc)ss$/i, exclude: /node_modules/, use: [ 'style-loader',   loader: 'css-loader', options:  importLoaders: 1 > >, 'sass-loader'] >, // MD   test: /\.md$/i, use: ['html-loader', 'markdown-loader'] >, // статические файлы   test: /\.(jpe?g|png|gif|svg|eot|ttf|woff2?)$/i, type: 'asset' > ] > > 
```
plugins

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

Основные
- `copy-webpack-plugin` — копирование файлов и директорий в output.path
- `html-webpack-plugin` — создание HTML-файла на основе шаблона
- `mini-css-extract-plugin` — создание CSS-файла для каждого JS-файла (только для production-режима)
- `webpack.ProvidePlugin` — автоматическая загрузка модулей
- `webpack.HotModuleReplacementPlugin` — «горячая» замена модулей (только для development-режима)
Дополнительные
- `webpack.ProgressPlugin` — кастомизация отображения прогресса сборки
- `webpack.DefinePlugin` — создание глобальных констант
- `webpack.EnvironmentPlugin` — создание переменных окружения process.env
- `dotenv-webpack` — создание переменных окружения .env
- `webpack-bundle-analyzer` — подробная информация о сборке
- `imagemin-webpack-plugin` — уменьшение размера изображений
Пример использования плагинов
```
const webpack = require('webpack')  const CopyWebpackPlugin = require('copy-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin')  const Dotenv = require('dotenv-webpack') module.exports =   // . plugins: [ // копируем статические файлы из public/assets в output.path/assets new CopyWebpackPlugin(  patterns: [   from: `./public/assets`, to: 'assets' > ] >),  // создаем index.html в output.path на основе public/index.html new HtmlWebpackPlugin(  // в index.html // будет заменено на Webpack title: 'Webpack', favicon: './public/favicon.png', template: './public/index.html', filename: 'index.html' >),  // делаем React глобально доступным new webpack.ProvidePlugin(  React: 'react' >),  // обеспечиваем доступ к переменным окружения new Dotenv(  path: './config/.env' >) ] > 
```
Дополнительные инструменты

Устанавливаются отдельно и имеют собственные настройки.
- `webpack-dev-server` — сервер для разработки
- `webpack-merge` — программное объединение двух и более файлов с настройками
- `webpack-config-utils` — создание гибкого файла настроек
- `workbox-webpack-plugin` — создание сервис-воркера
Похожие публикации:

Webpack cli что это

Что такое Webpack

Кратко

Базовое использование

Отслеживание изменений в проекте

Расширение

Лоадеры

Плагины

На практике

Игорь Камышев советует

Как собрать проект на Webpack

Подготовка

Инициализация проекта

Установка webpack, webpack-cli и webpack-dev-server

Установка css-loader и style-loader

Установка html-webpack-plugin

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

Так зачем использовать Webpack

Дальше

Читать дальше

Dev Mode в Figma. Быстрый обзор бета-версии

Горячие клавиши Figma для быстрой работы

Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)

Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)

Старт в Figma для верстальщика

Инструменты для работы со шрифтами

10 горячих клавиш VS Code, которые ускорят вашу работу

10 лучших тем для VS Code

10 полезных плагинов VS Code для вёрстки

17 полезных плагинов JavaScript в VS Code

Подборка микроанимаций для фронтенда с CodePen в 2023

Webpack: инструкция по применению

Копирование нескольких файлов

Другие способы

Что такое Webpack?

Установка Webpack

Глобальная установка

Локальная установка

Настройка Webpack

Точка входа

Вывод (output)

Плагины

Режимы Webpack

Запуск Webpack

Просмотр изменений

Обработка изображений

Обработайте SASS код и преобразуйте его в CSS

Генерация Source Maps

Webpack

Команды и флаги Webpack CLI​

Основные команды​

Основные флаги​

Настройки​

mode​

context​

entry​

output​

resolve​

Только для development-режима​

devtool​

devServer​

Только для production-режима​

optimization​

perfomance​

Опциональные​

watch​

watchOptions​

externals​

experiments​

module​

loaders​

Стилизация​

Транспиляция​

Шаблонизация​

Фреймворки​

Пример применения загрузчиков​

plugins​

Основные​

Дополнительные​

Пример использования плагинов​

Команды и флаги Webpack CLI

Основные команды

Основные флаги

Настройки

mode

context

entry

output

resolve

Только для development-режима

devtool

devServer

Только для production-режима

optimization

perfomance

Опциональные

watch

watchOptions

externals

experiments

module

loaders

Стилизация

Транспиляция

Шаблонизация

Фреймворки

Пример применения загрузчиков

plugins

Основные

Дополнительные

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

Дополнительные инструменты