Рубрика «webpack»
Статичный сайт на webpack5 с svg sprite
2025-12-07 в 4:22, admin, рубрики: npm, sass, scss миксин, svg, svg-sprite, webpack, webpack5, сборка проектаВеб. К черту фреймворки! Пишем свой starter-kit с роутером и сторами
2025-10-05 в 8:15, admin, рубрики: html, React, SPA, vanilla.js, webpack, веб-компоненты, экспериментВведение
Привет! Меня зовут Сергей и я фронтенд-разработчик. Уже несколько лет я использую React как основную библиотеку. Связка React + MUI + Styled Components (MUI-версия) + Storybook + Playwright. Стейт-менеджеры не использую, поскольку они избыточны в большинстве случаев, и достаточно грамотного использования контекста.
Я очень неплохо умею пользоваться React, поэтому имею право его очень сильно недолюбливать.
Electron + microfrontends
2025-08-05 в 6:16, admin, рубрики: electron, microfrontends, module federation, webpackНедавно на проекте столкнулся с необычной задачей - сделать из готового React веб-приложения десктопную версию на Electron. Что же тут необычного? А то, что наше веб-приложение построено на микрофронтенд архитектуре и располагается в трёх отдельных репозиториях. А общение между микрофронтендами происходит в runtime через HTTP. И тут начинаются сложности, так как для создания дистрибутива, Electron'у нужен доступ к исходникам всего приложения. Хотя Electron легко подружить с Webpack, как это сделать с плагином Module Federation на первый взгляд не понятно.
От Lerna до ModuleFederation
2025-05-22 в 9:01, admin, рубрики: microfrontends, module federation, webpack, опыт разработчикаПривет! Меня зовут Дмитрий Ханин, я работаю в Сбере и участвую в разработке Платформы ЦА — системы на базе блокчейн, занимающейся привлечением средств юридических и физических лиц. Сегодня хотелось бы рассказать про тот путь, который мы прошли за несколько лет, как организовали взаимодействие между разными приложениями и чем нам это помогло.
Рассказ разделён на две части. В первой рассмотрим путь проекта и проблемы, с которыми сталкивались, а во второй разберём, как мы решали часть этих проблем.
Словарь терминов
1Продукт Читать полностью »
Микрофронтенд на пальцах с module federation 2.0
2025-04-07 в 9:15, admin, рубрики: module federation, TypeScript, webpack, микрофронтендыВсем привет! Меня зовут Игорь. Я frontend-разработчик. Сегодня я расскажу вам, насколько просто использовать микрофронты. Причина, по которой я хотел бы рассказать об этом подробнее, в том, что люди, которые недавно в разработке, не всегда представляют, как приложения взаимодействуют между собой и через что приходится пройти нашему remote-модулю, чтобы он смог отобразиться на хосте.
Перед началом предлагаю немного остановиться на терминологии и стеке:
-
Микрофронтенд — это независимый модуль, который мы подключаем.
-
Хост — это бандл, куда мы подключаем микрофронтенд.
-
RemoteЧитать полностью »
Webpack, Vite или Rspack: что это за зоопарк или чем собирать микрофронтенды в 2025?
2025-03-06 в 10:16, admin, рубрики: bundler, module federation, rspack, vite, vue.js, webpack, сборка проекта
Введение
Сегодня в мире разработки веб-приложений нам очень часто приходится прибегать к помощи сборщиков. И хоть на текущий момент существует большой выбор инструментов сборки приложений, значительная доля написанных проектов использует Webpack в качестве сборщика. И бывает, что стандартный функционал Webpack не покрывает наши потребности, а плагинов, которые это могут сделать, нет в открытом доступе. Тогда мы приходим к выводу, что нужно писать свой плагин. Эта статья посвящена необходимой базе, которая вам понадобится, чтобы понять, как устроены плагины для Webpack и как начать их писать.
Что же такое Webpack
Релиз Bun 1.0 (новый runtime для JavaScript )
2023-09-09 в 22:18, admin, рубрики: bun, esbuild, javascript, jest, node.js, npm, TypeScript, webpack
Представляем Bun версии 1.0.
Bun — это быстрый универсальный набор инструментов для запуска, сборки, тестирования и отладки JavaScript и TypeScript кода (от одного файла до fullstack-приложения). Сегодня Bun стабилен и готов к продакшену.
Установка Bun
# curl
curl -fsSL https://bun.sh/install | bash
# npm
npm install -g bun
# brew
brew tap oven-sh/bun
brew install bun
# docker
docker pull oven/bun
docker run --rm --init --ulimit memlock=-1:-1 oven/bunОбновление Bun
Читать полностью »
Webpack. Создание WebP вместе с Jpeg и Png
2023-05-07 в 17:38, admin, рубрики: css, html, html-верстка, jpeg, optimization, PNG, WebP, webpack, Клиентская оптимизация, плагины, сборщик пакетов, сжатие данных, системы сборкиКак вы знаете, формат изображений WebP в большинстве случаев имеет меньший вес, по сравнению со своими братьями: png и jpeg. Поэтому использовать его в своих приложениях - это хорошая практика.
А как же пользователи, устройства которых не поддерживают данный формат?
В этом случае нам помогает тег <picture> или значение image-set свойства background-image. Просто пишем такие магические конструкции и браузер сам выберет тот источник, который понимает:
<!-- for HTML... -->
<picture>
<source type="image/webp" srcset="images/cat.webp">
<img src="images/cat.jpg" width="100" height="100" alt="Cat">
</picture>Читать полностью »Webpack + CSS Modules + TS = Love
2022-09-17 в 23:31, admin, рубрики: css, TypeScript, webpack, Разработка веб-сайтовЯ считаю, что CSS Модули — это монументальный проект. С его помощью можно решить одну худших проблем CSS — коллизию имен классов. Давайте рассмотрим простой пример, чтобы было понятно, о чем идет речь.
Представим, что мы разрабатываем компонент Button. Использовать "чистый" CSS опасно, потому что есть риск, что кто-то ещё в вашем проекте (или ещё хуже — в подключенной библиотеке) использует то же имя класса:
/* Button.css */
.button {
color: #f00;
padding: 10px;
font-size: 18px;
}
/* node_modules/some_lib/styles.css */
.button {
color: #0f0;
}// Button.tsx
import { FC } from "react";
import "./Button.module.css";
import "some_lib/styles.css";
export const Button: FC = (props) =>Читать полностью »