5 плагинов для webpack

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

Для каждого плагина — ссылка на гитхаб и npm: https://tprg.ru/YRWS

#webpack #инструменты

Webpack на практике: с нуля до создания автотестов

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

В этом руководстве рассказываем, как создать сборку для небольшого веб-приложения, а затем научим вас использовать Webpack для настройки автоматических тестов: https://tproger.ru/translations/webpack-from-zero-to-hero/

Также читайте: 5 плагинов для Webpack

#javascript #webpack

Webpack: основы настройки проекта на JavaScript и Sass

Webpack — инструмент веб-разработчика, который соединяет JavaScript- и CSS-файлы в единое целое — файл, который часто называют «bundle».

В этой статье представлена инструкция по настройке среды для проекта на JavaScript и Sass:

https://tprg.ru/uFxO

Также читайте — Webpack на практике: с нуля до создания автотестов

#javascript #webpack

Гайд по настройке Webpack 5 на русском

В гайде вы найдёте инструкцию по базовой настройке и узнаете о работе с плагинами. Также есть примеры создания конфигураций для прода и разработки.

Узнайте, как использовать вебпак для сборки JavaScript, изображений, шрифтов и стилей, а также как запускать сервер для разработки:

https://tprg.ru/QAve

#webpack

​Мнение: почему не стоит использовать Webpack

Многие приложения сейчас используют Webpack, ведь в своё время он затмил и вытеснил такие инструменты, как Gulp или Grunt. Но, возможно, ему уже пора на покой?

В этой статье автор привёл несколько причин почему стоит отказаться от использования Webpack в качестве сборщика и упаковщика:

https://tprg.ru/FQaZ

#webpack

​Начало работы с Webpack

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

Здесь вы можете познакомиться с Webpack подробнее:

https://tprg.ru/9X0K

#webpack

​Углубленный взгляд на процесс компоновки webpack

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

Здесь используются диаграммы и различные примеры, наглядно показывающие, как всё происходит «под капотом»:

https://tprg.ru/fJsV

#webpack

​Добавление Vite в ваше существующее веб-приложение

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

В этой статье вы узнаете, как без особого труда перевести ваш существующий проект на Vite:

https://css-tricks.com/adding-vite-to-your-existing-web-app/

#vite #webpack

​​Децентрализованная конфигурация webpack, или как упростить сборку проекта

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

https://habr.com/ru/company/funcorp/blog/538982/

#webpack

​Совместное использование компонентов React с Webpack 5

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

Подробнее:

https://nuancesprog.ru/p/15900/

#webpack #react

​Настройка Webpack 5

Пошаговое руководство по настройке сборщика Webpack 5 для совместной работы с такими инструментами как Pug, Sass, JavaScript, React и Markdown:

https://habr.com/ru/post/701724/

#webpack

​Представляем Turbopack: преемника Webpack на основе Rust

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

Сегодня появился новый инструмент Turbopack — это современный преемник Webpack. Подробнее о нём:

https://vercel.com/blog/turbopack

#webpack #turbopack

​Webpack + CSS Modules + TS = Love

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

Вот только TypeScript по умолчанию с модулями CSS работать не умеет. Зато его можно легко обучить этому. Как это сделать, рассказали тут:

https://habr.com/ru/articles/688844/

#typescript #css #webpack

​​Что такое Webpack и как с ним работать: полный курс по Webpack

Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт. Но в процессе можно забыть какой-нибудь скрипт или расположить их в неправильном порядке — и приложение «посыпется».

Webpack — это сборщик модулей, которые решает эти проблемы. Он создает граф зависимостей и собирает модули приложения в бандл, на который может ссылаться файл «index.html». А ещё Webpack может преобразовать модули перед их добавлением в бандл, например: SASS/LESS в обычный CSS, или JavaScript в ES5 для старых браузеров.

Нашли подробный ролик длиной 3,5 часа, в котором вы:
— Изучите основы и реализуете полную конфигурацию Webpack.
— Настроите TypeScript, React, Babel.
— Научитесь работать со стилями и CSS modules.
— Рассмотрите большую часть возможностей Webpack 5.
— Реализуете монорепозиторий с микрофронтендом на основе workspaces и Module federation.

Делимся с вами: https://youtu.be/acAH2_YT6bs

#курс #webpack