Webpack 5 что это

Webpack

Webpack — сборщик модулей, который позволяет скомпилировать JavaScript-модули в единый JS-файл. Также работает с TypeScript, CoffeeScript, его можно использовать совместно с Node.js. Webpack реализован как программа, которая при запуске обрабатывает модули, строит между ними граф зависимостей, а потом на основе графа генерирует единый файл.

Освойте профессию «Frontend-разработчик»

Кто пользуется Webpack

• Frontend-разработчики, которые используют в работе JavaScript и его фреймворки.
• Backend-разработчики, пишущие серверную часть сайта или веб-приложения с помощью Node.js.
• Программисты на TypeScript и CoffeeScript — языках на базе JS, которые применяются во фронтенде и иногда в бэкенде.

Профессия / 9 месяцев
Frontend-разработчик

Создавайте интерфейсы сервисов, которыми пользуются все

Для чего нужен Webpack

• для быстрого объединения множества JavaScript-файлов в один большой;
• более легкого подключения кода JS к HTML-странице;
• транспиляции, или перевода кода на TypeScript или CoffeeScript на «чистый» JavaScript;
• подготовки файлов к размещению на сервере для их оптимизации;
• адаптации кода к старым версиям браузера;
• тестирования написанного кода с помощью локального сервера, где запускается собранный проект;
• разнообразных преобразований кода и выполнения дополнительных действий.

Понятия Webpack

Entry. Точка входа — файл, с которого сборщик начинает объединять модули. Обычно это основной JS-файл проекта, и от него зависят все остальные.

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

Bundle. Бандл — собранный из модулей большой файл, результат работы сборщика.

Loaders. Они же лоадеры, или загрузчики — дополнительные сущности, которые расширяют возможности Webpack по преобразованию. По умолчанию сборщик распознает только файлы JS и JSON. С помощью лоадеров можно «научить» его понимать и другие файлы, от таблиц стилей CSS до изображений. Загрузчики скачиваются отдельно.

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

Режимы. Режимы работы — наборы настроек для разных задач.

• Режим production — для финальной сборки перед загрузкой на сервер. Предусматривает максимальную оптимизацию и сжатие кода.
• Режим development — для тестовых сборок, которые нужны при разработке. Упор делается не на оптимизацию, а на читаемость. Можно скачать дополнительный модуль webpack-dev-server и запустить локальный сервер для тестирования проекта. С ним проект будет пересобираться при каждом изменении кода, и эти изменения будут применяться в реальном времени.
• Режим none не предусматривает оптимизации и отключает ее настройки.

По умолчанию Webpack работает в режиме none.

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Как работает сборщик

1. Перед началом работы программист создает в папке проекта файл webpack.config.js. Он нужен для его настройки. Чтобы файл заработал, сборщик уже должен быть установлен.
2. В файле разработчик прописывает настройки сборщика для проекта. Он указывает точку входа и выхода, лоадеры и плагины, которые нужно применить при сборке. Там же можно установить режим работы — production или development.
3. В настройках менеджера пакетов npm разработчик указывает условия для запуска Webpack. Теперь при выполнении определенной команды запустится сборщик.
4. При запуске Webpack использует файл конфигурации webpack.config.js, где пользователь ранее указал настройки. Он находит файлы, связанные с точкой входа, строит граф их зависимостей, а потом собирает все в единый бандл на основе графа. Так бандл получается корректным, и все в нем подключается в правильном порядке.

Как начать работу с Webpack

Webpack можно скачать бесплатно из официального репозитория на GitHub либо установить с помощью менеджеров пакетов npm или Yarn. Инструмент может быть установлен глобально либо локально для каждого проекта.

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

npm i -g webpack webpack-cli

yarn global add webpack webpack-cli

Теперь можно запустить Webpack:

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

yarn add webpack webpack-cli -D

npm i webpack webpack-cli —save-dev

После этого нужно добавить строки в package.json файл:

После этого можно запустить Webpack, введя в корневом каталоге проекта:

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

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Статьи по теме:

Что нового в Webpack 5?

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

Основные нововведения, которые мы рассмотрим:

— Улучшена скорость сборки бандла благодаря оптимизации алгоритма кэширования;

— Улучшен механизм Tree Shaking и генерации кода;

— Улучшена совместимость с веб-платформой;

— Удалены полифилы Node.js модулей;

— Добавлен новый функционал Module Federation;

— Встроен загрузчик Asset modules.

Давайте рассмотрим все эти новшества поподробнее.

Улучшение скорости сборки бандла (Persistent Caching)

В Webpack 5 появилась возможность постоянного кэширования данных благодаря кэшу файловой системы. Это позволяет значительно сократить скорость сборки конечного бандла. Для того, чтобы включить данный функционал, потребуется указать следующие значения:

 module.exports = < cache: < type: 'filesystem', buildDependencies: < config: [__filename] >> >; 

В объекте cache нужно указать «filesystem» для поля type, тем самым указав тип кэширования, который будет использоваться. В объекте buildDependencies необходимо добавить в поле config свою конфигурацию, чтобы анализировать кэш в случае изменения конфигурации.

Улучшен механизм Tree Shaking и генерации кода

Благодаря использованию статического анализа кода, появилась возможность построения графов зависимостей, что привело к удалению большого количества неиспользованного кода. Webpack 5 стал отслеживать вложенные свойства экспортов, это позволило улучшить tree shaking и исключить неиспользуемые и «неправильные» экспорты при получении конечного бандла. К данному улучшению также был добавлен tree shaking CommonJS-модулей.

Улучшение совместимости с веб-платформой

Было добавлено большое количество взаимодействий с веб-платформой благодаря поддержке следующих функционалов: Asset modules, Native Worker, URLs, Async modules, JSON Modules, import.meta. Данная интеграция позволяет намного удобнее производить работу с веб-платформой в Webpack 5.

Удалены полифилы Node.js модулей

В Webpack 5 были удалены полифилы для работы с Node.js. Изначально с появлением Webpack основная работа приходилась на разработку Node.js-модулей и использование полифилов с большим количеством генерированного кода было неизбежно для комфорта при разработке с Webpack. В текущее время это уже не актуально и в основном Webpack стал использоваться для разработки под браузеры. Как результат, удаление полифилов из Webpack привело к значительному уменьшению бандла.

Добавлен новый функционал Module Federation

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

Встроен загрузчик Asset modules

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

Заключение

Сегодня мы разобрали основные нововведения Webpack 5. Прошлись по самым полезным из них. Имейте ввиду, что я старался указать только самые крупные из них. В статье не указано большое количество мелких изменений, которых коснулся Webpack 5. Для получения более подробной информации рекомендую воспользоваться оригинальной документаций (ссылка приложена ниже). Надеюсь, что данная статья была вам полезна. Учитесь, думайте, пишите код. Удачного кодинга, друзья!

Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.

Webpack 5: создание базовой конфигурации

Рассмотрим, как собрать простую конфигурацию на Webpack 5 для разработки, ничего сложного не будем делать, для старта будет достаточно.

Для начала создадим пустую папку для проекта и инициализируем проект npm . И установим webpack, webpack-cli (инструмент, используемый для запуска webpack из командной строки) и webpack-dev-server (для создания сервера для удобной разработки):

npm init -y npm install webpack webpack-cli webpack-dev-server --D

Теперь создадим папку src , в ней мы будет разрабатывать наше приложение, также создадим файл index.js в этой папке. Именно этот файл станет точкой входа сборки нашего приложения.

Далее создадим папку dist , в неё будет компилироваться наше выходное приложение. (содержимое папки можно вытащить и запустить в любом месте). Внутри папки создадим файл index.html , это будет статический файл, который будет подключать наш сбилденный скрипт.

Теперь осталось создать лишь конфиг для вебпак, 5 версия WebPack позволяет не использовать его, но лучше все таки его создать, ничего сложного в нем нет на начальном этапе, давайте его добавим и разберемся немного в нем. Создаем в корне файл webpack.config.js со следующим кодом:

const path = require('path'); module.exports = < context: path.resolve(__dirname, 'src'), entry: './index.js', mode: 'development', devtool: 'inline-source-map', devServer: < /** Будет запускать сервер на localhost:8080 в этой папке*/ contentBase: './dist', >, watch: true, output: < filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), >, module: < rules: [ /** Babel **/ < test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: < loader: 'babel-loader', options: < presets: ['@babel/preset-env'] >> // npm install babel-loader @babel/core @babel/preset-env -D >, /** CSS */ < test: /\.css$/i, use: ['style-loader', 'css-loader'], // npm i style-loader css-loader -D >, /** SCSS/SAAS */ < test: /\.s[ac]ss$/i, use: [ // Creates `style` nodes from JS strings "style-loader", // Translates CSS into CommonJS "css-loader", // Compiles Sass to CSS "sass-loader", ], // npm i style-loader css-loader sass sass-loader -D >, /** Картинки */ < test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', >, /** Шрифты */ < test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', >, /** Файлы CSV */ < test: /\.(csv|tsv)$/i, use: ['csv-loader'], // npm i csv-loader -D >, /** Файлы XML */ < test: /\.xml$/i, use: ['xml-loader'], // npm i xml-loader -D >, ], >, >; 

Теперь разберемся с параметрами:

• context — указываем контекст, т.е. папку, которую будет обрабатывать webpack (в большинстве случаев у всех так)
• entry — точка входа, указываем файл, с которого начнется обработка webpack (в папке, которую мы указали в context, т.е. — src/ )
• mode — можно указать одно из значение: none , development , production , в зависимости от этого, вебпак выбирает разные режимы работы, быстрота — для production, удобность разработки — development, не нужны никакие действия, то указываем none.
• devtool — указываем inline-source-map , для составления карты, которые позволяет удобнее дебажить по файлам проекта, а не в сбилденном проекте в браузере
• devServer — для удобной разработки будет создаваться сервер с watcher, который при изменение любого файла перезагрузит страницу автоматом, в режиме dev
• watch — возможность отслеживание изменения файлов
• output — указываем, куда будет билдится наш проект, указываем папку и название файла
• modules — вебпак умеет работать не совсеми файлами из коробки, для работы со стилями, csv, xml и прочим его нужно подружить, для этого необходимо правило, где мы указываем в test — расширения файла по маске и в use указываем loaders, которые будут их обрабатывать, для работы loaders нужно установить соответствующие пакеты.

Также мы подключили babel , для перевода кода на JS с нового синтаксиса в старый (необходим для работы во всех браузерах)

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

Добавим три скрипта в свойство scripts: build , watch , start .

< "name": "webpack 5", "version": "1.0.0", "private": true, "scripts": < "build": "webpack", "watch": "webpack --watch", "start": "webpack serve --open" >, "devDependencies": < "@babel/core": "^7.13.14", "@babel/preset-env": "^7.13.12", "babel-loader": "^8.2.2", "css-loader": "^5.2.0", "sass": "^1.32.8", "sass-loader": "^11.0.1", "style-loader": "^2.0.0", "webpack": "^5.28.0", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2" >, "keywords": [], "author": "", "license": "ISC", "description": "", > 

• build — простая сборка проекта, использается для запуска на prod. Генерирует файлы в папке dist
• watch — тоже самое, что и build, только в этом случае, при каждом изменение файлов в проекте будет происходить пересборка проекта
• start — запускает сервер для нашего проекта и открывает страницу в браузере, требуется для удобной разработки, плюсом ещё у нас будет обновляться страничка при изменении любых файлов.

Вот в принципе и все, что нужно для старта. Дополнительно покажу, как стоит писать проект и подключать файлы.

src/index.js

// Подключение картинки import Icon from './icon.png'; // подключение стилей import './style.scss'; function component() < const element = document.createElement('div'); element.innerHTML = 'Hello Webpack 5'; element.classList.add('hello'); // Пример использования картинки const myIcon = new Image(); myIcon.src = Icon; element.appendChild(myIcon); return element; >document.body.appendChild(component()); 

src/style.css

$body-color: green; // Подключения шрифтов @font-face < font-family: 'MyFont'; src: url('./my-font.woff2') format('woff2'), url('./my-font.woff') format('woff'); font-weight: 600; font-style: normal; >body < color: $body-color; // подключения картинок background: url('./icon.png'); >

В итоге у нас получается такая структура файлов:

|– /dist | |- index.html |– /src | | |– index.js | | |– style.css | | |– icon.png | | |– my-font.woff | | |– my-font.woff2 |- package.json |- webpack.config.js 

В принципе этого достаточно для начала, но можно немного улучшить наш проект

Сделаем так, чтобы нам не пришлось в ручную править файл dist/index.html , а сделать так, чтобы он собирался сам.

Для этого нам понадобиться HtmlWebpackPlugin , давайте установим и добавим его.

npm install html-webpack-plugin -D

Затем подключим и добавим его в webpack.config.js .

Также для удобства в output добавим параметр clean , для удаления сбилденных файлов, после новой сборки, чтобы не копился мусор, а также будем генерить новый имена для файлов, плагин сам поймет и подключит все файлы внутри index.html как надо.

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = < // . output: < filename: '[name].[contenthash].js', // динамичное и уникальное имя файла path: path.resolve(__dirname, 'dist'), clean: true, // для очистки папки dist при новом билде >, plugins: [ new HtmlWebpackPlugin(< title: 'Наш заголовок страницы', >), ], // . 

Теперь все содержимое папки dist — генерируемое, мы можем очистить полностью папку и сгенерить заного.

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

Как собрать проект на 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