#webpack — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #webpack, aggregated by home.social.
-
Vite vs. Webpack: Which Build Tool Is Right for Your Frontend Project?, by @eleanorhecks.bsky.social (@designerly.bsky.social):
-
Vite vs. Webpack: Which Build Tool Is Right for Your Frontend Project?, by @eleanorhecks.bsky.social (@designerly.bsky.social):
-
Мы внедряем Storybook на легаси-проекте и заранее пообещали рассказать, если он не взлетит
Честный рассказ команды Modus , которая только что завела Storybook поверх большой легаси-базы: зачем стартуем, чего ждём и как через полгода проверим, окупился ли он. Представьте, что разработчику нужно поправить одну кнопку — отступ или состояние наведения. Работы на минуту, но для этого нужно поднять всё приложение, залогиниться и прокликать половину интерфейса до нужного экрана. И так — каждый раз. К третьему заходу проще остановиться на «вроде норм», чем повторять этот цикл ради мелочи. Нам это надоело и мы решили попробовать Storybook. А заодно — поставить над собой небольшой эксперимент. Если вы сейчас решаете, тащить ли Storybook в уже живой проект, и хотите увидеть честный старт, а не сухой результат — этот материал для вас.
https://habr.com/ru/companies/modusbi/articles/1059794/
#storybook #React #легасикод #UIкит #ревью #онбординг #MUI #Webpack #TypeScript #frontend
-
Как мы ускорили разработку Frontend на 10х TSGO, Oxlint, Rsbuild, React Compiler & CodeGen
В этой статье разберу пять направлений, в которых мы получили измеримый эффект: 1. Type checking — TSCheck vs TSGO 2. Linting — ESLint vs Biome vs Oxlint 3. Bundling — Webpack → Vite → Rsbuild 4. API-контракты — Кодогенерация без AI 5. React-оптимизации — React Compiler в production
https://habr.com/ru/articles/1049908/
#tsgo #react #webpack #vue #rsbuild #eslint #oxlint #biome #swagger #react_compiler
-
Optimizing Our Build Times by Migrating From Webpack to Rspack, by (not on Mastodon or Bluesky):
#migrating #webpack #rspack #building #optimization #casestudies
-
Optimizing Our Build Times by Migrating From Webpack to Rspack, by (not on Mastodon or Bluesky):
#migrating #webpack #rspack #building #optimization #casestudies
-
Wenn du aus der Java-Welt kommst, wirken Begriffe wie JavaScript, TypeScript, Angular, React, Vue, Node.js oder npm am Anfang schnell wie ein einziger großer Themenblock. Genau da entsteht oft die eigentliche Verwirrung. Alles klingt ähnlich, vieles taucht im gleic...
#Coding #JavaScript #Angular #TypeScript #React #Node #Vite #Webpack #ESLint #Maven #Paketmanager #ECMAScript #Programming
-
أطلقت Tailwind CSS الإصدار الجديد 4.3 الذي يقدم أدوات مساعدة مبتكرة لتنسيق أشرطة التمرير والحاويات وعرض التبويبات، مما يسهل التوافق بين المتصفحات المختلفة بشكل كبير. كما يتضمن التحديث أربع لوحات ألوان محايدة جديدة تمنح المصممين خيارات جمالية أوسع. بالإضافة إلى ذلك، تم توفير إضافة مخصصة لبرنامج Webpack تهدف إلى تسريع عملية البناء البرمجي بشكل ملحوظ، خاصة في المشاريع الضخمة، مما يعزز من كفاءة سير العمل للمطورين ويحسن تجربة الاستخدام الشاملة في تصميم الويب الحديث.
-
Damn, I was trying to figure out why my @layer CSS directive wasn't working and realized that Webpack was messing with the directive placement because of css-loader. I can't get it to behave without completely removing css-loader but then that means I need a different way to concatenate the CSS and add versioning hashes. Now I might need to ditch Webpack, but how am I going to version the fonts and images referenced in the CSS. Lmao web development sucks.
-
Damn, I was trying to figure out why my @layer CSS directive wasn't working and realized that Webpack was messing with the directive placement because of css-loader. I can't get it to behave without completely removing css-loader but then that means I need a different way to concatenate the CSS and add versioning hashes. Now I might need to ditch Webpack, but how am I going to version the fonts and images referenced in the CSS. Lmao web development sucks.
-
Работа с легаси кодом: не переписывать, а приручить
Привет, Хабр! Я Валерий Маланин, фронтенд-разработчик в команде Modus BI. И по опыту знаю, что каждый разработчик хотя бы раз мечтал попасть на проект, где всё с нуля. Свежий стек, понятная архитектура, аккуратные модули, тесты, документация и никаких комментариев в духе «не трогать, иначе всё упадёт». В таком проекте легко писать новый код и приятно разбираться в старом. Но в реальности всё обычно выглядит иначе. Команда приходит в продукт — а там React 16, Webpack 2, компонент на две тысячи строк, круговые зависимости и ни одного теста. И это не исключение, а обычная картина для живой системы, которая давно работает в проде. Любой проект со временем накапливает легаси. Бизнес торопит и заставляет срезать углы. Команда меняется, и вместе с ней уходит контекст старых решений. Технологии устаревают, а код остаётся. В итоге систему становится страшно менять, потому что никто до конца не понимает, что сломается после очередной правки.
https://habr.com/ru/companies/modusbi/articles/1027368/
#legacy #legacyкод #рефакторинг #strangler_fig #археология_кода #модульность #фронтендразработка #фронтенд #frontend #webpack
-
Почему ваш бандл тяжелее чем должен быть — тестирую tree shaking на 7 бандлерах
Вы уверены, что ваш бандлер вырезает неиспользуемый код? Я тоже был уверен — пока бандл Next.js проекта не оказался в два раза тяжелее, чем нужно. Прогнал одинаковый тест на webpack, rollup, vite, esbuild и Next.js — 5 из 7 ломаются на банальном barrel файле. Полез в исходники, нашёл основную причину — и она оказалась не там, где ожидал.
https://habr.com/ru/articles/1024404/
#tree_shaking #webpack #barrel_file #bundler #nextjs #rollup #vite #esbuild #оптимизация_бандла #фронтенд
-
Just got woken up by a tech recruiter again.
I explained that at my last job I built out build tools for multiple teams on a giant custom #webpack #React app. I tried to dumb it down as politely as possible, but it was lost on him. The only thing he understands is feature building.
I hate this industry.
-
Just got woken up by a tech recruiter again.
I explained that at my last job I built out build tools for multiple teams on a giant custom #webpack #React app. I tried to dumb it down as politely as possible, but it was lost on him. The only thing he understands is feature building.
I hate this industry.
-
Creating a Liferay Global JS Client Extension with TypeScript and Webpack
#liferay #webpack #typescript
https://www.xtivia.com/blog/creating-a-liferay-global-js-client-extension-with-typescript-and-webpack/ -
Creating a Liferay Global JS Client Extension with TypeScript and Webpack
#liferay #webpack #typescript
https://www.xtivia.com/blog/creating-a-liferay-global-js-client-extension-with-typescript-and-webpack/ -
#Webpack has published its 2026 roadmap.
Key highlights:
• Native CSS module support
• Universal compilation across environments
• Built-in TypeScript support
• Strong focus on performance optimizationMore details on #InfoQ ⇨ https://bit.ly/40zFlaX
-
#Webpack has published its 2026 roadmap.
Key highlights:
• Native CSS module support
• Universal compilation across environments
• Built-in TypeScript support
• Strong focus on performance optimizationMore details on #InfoQ ⇨ https://bit.ly/40zFlaX
-
Whenever I work with #webpack I regret it. How hard can it be to make a JavaScript function available for inline code in an HTML page? Turns out very hard if webpack is involved.
-
Whenever I work with #webpack I regret it. How hard can it be to make a JavaScript function available for inline code in an HTML page? Turns out very hard if webpack is involved.
-
[Webpack] Roadmap 2026, by @evenstensberg.bsky.social:
-
[Webpack] Roadmap 2026, by @evenstensberg.bsky.social:
-
Still using #webpack or other bundlers for your Java/TypeScript projects?
Two more things I came across today which make them less needed:
- css nesting: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting
- importmap: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmapNice.👍 😎
-
Still using #webpack or other bundlers for your Java/TypeScript projects?
Two more things I came across today which make them less needed:
- css nesting: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting
- importmap: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmapNice.👍 😎
-
Okay, today I spent time organizing the webpack security group. Tomorrow I’ll do the same with the Express TypeScript group.
-
Okay, today I spent time organizing the webpack security group. Tomorrow I’ll do the same with the Express TypeScript group.
-
Module Federation на примере фишинга
Разберём микрофронтенд через историю вымышленного хакера — и заодно поймём, почему это спрашивают на собеседованиях. Недавно на собесе меня спросили: "А как именно работают микрофронты? Там что, прямо eval используют?" Я что-то промямлил про expose, host, сборку... и понял, что вообще не понимаю сути. Знакомо?
https://habr.com/ru/articles/979242/
#microfrontends #микрофронтенды #вебпак #webpack #module_federation
-
The JavaScript Bundler Grand Prix, by @kateholterhoff (@redmonk):
https://redmonk.com/kholterhoff/2025/12/16/javascript-bundler-grand-prix/
#javascript #bundling #tooling #vite #bun #rolldown #webpack #rollup #parcel #esbuild #history
-
The JavaScript Bundler Grand Prix, by @kateholterhoff (@redmonk):
https://redmonk.com/kholterhoff/2025/12/16/javascript-bundler-grand-prix/
#javascript #bundling #tooling #vite #bun #rolldown #webpack #rollup #parcel #esbuild #history
-
Дети, запомните: если дядя из туториала предлагает вам начать проект на Express.js… Рейтинг opensource для фронтенда
Всем привет! Меня зовут Алексей Золотых, я тимлид команды
https://habr.com/ru/companies/ncloudtech/articles/975012/
#express #фронтенд #опенсорс #опенсорс_библиотеки #expressjs #create_react_app #momentjs #webpack #nextjs #typescript
-
Не спешите выкидывать Webpack: разбор альтернатив и реальных сценариев миграции
Привет, Хабр! На связи Никита Ли, я Frontend-разработчик в Рунити. Вокруг сборщиков последние годы кипят страсти: большинство боготворит Vite, кто-то экспериментирует с esbuild, а энтузиасты активно продвигают инструменты на базе Rust — прежде всего Rspack и SWC. На фоне этого Webpack нередко называют пережитком, который якобы тормозит развитие команд. Но жизнь реальных продуктов куда сложнее, чем пишут в соцсетях . Иногда Webpack остается единственным зрелым вариантом. А иногда — мешает и действительно требует замены. В этой статье я попробую разобраться, откуда вообще взялись сборщики и что именно происходит внутри Webpack, насколько современные альтернативы действительно готовы его заменить, почему в Рунити мы осознанно продолжаем использовать Webpack в основных продуктах и в каких случаях смена сборщика действительно имеет смысл, а в каких может обернуться лишней тратой времени и сил без ощутимой выгоды.
-
Статичный сайт на webpack5 с svg sprite
Этот стартовый сборка для разработки статичного сайта на Webpack5. Максимально упростил разработку: можно подключать встариваемы модули шаблонов для страниц (header/footer), использовать SASS с удобными миксинами, автоматически собирать SVG-спрайты для иконок. Для продакшна - минификация CSS/JS, удаление console.log и разделение кода на чанки для кэширования. Ключевые части сборки: html-webpack-plugin генерирует HTML из src/html/views, raw-loader подтягивает include-фрагменты. SCSS миксины для удобных медиа запросов, краткой их записи +r($md). Автоматическая генерация SVG-sprite, svg-sprite-loader собирает все src/icons/*.svg в inline-спрайт — иконки затем вставляются в шаблоны через .
https://habr.com/ru/articles/974098/
#webpack5 #webpack #scss_миксин #sass #npm #сборка_проекта #svgsprite #svg
-
What if a single missing #TypeScript spec blocks your entire frontend build? Christian Siebmanns uses #OpenAPI, Nexus, & Module Federation to solve real-world CI chain reactions.
A pragmatic, technical case study: https://javapro.io/2025/07/24/integrating-micro-frontends-into-existing-applications-lessons-learned/
-
What if a single missing #TypeScript spec blocks your entire frontend build? Christian Siebmanns uses #OpenAPI, Nexus, & Module Federation to solve real-world CI chain reactions.
A pragmatic, technical case study: https://javapro.io/2025/07/24/integrating-micro-frontends-into-existing-applications-lessons-learned/
-
This is my theme song when setting up webpack on a project from scratch.
-
Ok did a release (a2 2am CET) so while I was waiting I *WROTE ANOTHER ARTICLE*.
this time just updating and adding more detail to my (amateurish) front end pbuild pipeline.
https://mostlylucid.net/blog/modernising-frontend-build-pipeline
-
Ok did a release (a2 2am CET) so while I was waiting I *WROTE ANOTHER ARTICLE*.
this time just updating and adding more detail to my (amateurish) front end pbuild pipeline.
https://mostlylucid.net/blog/modernising-frontend-build-pipeline
-
Как сделать сайт бесконечно ленивым. Часть 4: Преждевременная загрузка
Ранее мы говорили о том, как улучшить кэширование наших проектов и правильно загружать поставщиков. А в этой статье мы рассмотрим следующее: - Как мы можем использовать стратегии предварительной загрузки, включая что такое "магические" комментарии Webpack, и что такое спекулятивная/ручная предварительная загрузка; - Как мы можем запрашивать данные с сервера, не дожидаясь загрузки наших статических файлов; - А также какие сторонние или наши собственные решения могут быть использованы для этого.
https://habr.com/ru/articles/964472/
#javascript #webpack #lazy_load #performance_optimization #web #webразработка #frontend #frontendразработка #react #typescript
-
Как сделать сайт бесконечно ленивым. Часть 1: Чем полезна ленивая загрузка
Ленивая загрузка - это принцип, который должен быть известен большинству frontend разработчиков. Однако, этот механизм обманчиво прост, и его освоение является гораздо более комплексной задачей, чем кажется многим. Если уже используете Lazy Loading, у вас все равно могут быть серьезные пробелы в знаниях. Но даже если вы считаете, что знаете про ленивую загрузку абсолютно все, освежить память не будет лишним. В этой статье мы рассмотрим основы ленивой загрузки: что это такое и почему это важно; как мы можем использовать ленивую загрузку в наших проектах; а также какие части кода следует загружать лениво.
https://habr.com/ru/articles/960058/
#javascript #webpack #lazy_load #performance_optimization #web #webразработка #frontend #frontendразработка #react #typescript
-
Как сделать сайт бесконечно ленивым. Часть 3: Вендоры и кэш
Ранее мы поговорили о том, как сделать дерево зависимостей нашего проекта максимально чистым и почему это важно для ленивой загрузки. А в этой статье мы расскажем о следующем: - Как мы должны загружать вендор файлы с точки зрения правильной организации ленивой загрузки. - Что общего между стратегиями оптимизации "ленивой загрузки" и "кэширования", и как использование одной из них влияет на другую. - Что такое кэшируемость и как сделать наше приложение максимально кэшируемым. - А также как правильно настраивать группы кэша в Webpack и не испортить кэшируемость.
https://habr.com/ru/articles/963112/
#javascript #webpack #lazy_load #performance_optimization #web #webразработка #frontend #react #typescript #frontendразработка
-
Как сделать сайт бесконечно ленивым. Часть 2: Графы зависимостей
Ранее мы обсуждали самые основы ленивой загрузки и то, почему она вообще важна. А в этой статье мы рассмотрим следующее: - Как бандлеры анализируют файлы исходного кода, строят деревья зависимостей и генерируют файлы для сборки. - Как они генерируют файлы JavaScript из исходного кода. - Как браузеры решают, какие сгенерированные файлы следует загружать, чтобы отобразить ленивую страницу/компонент. - И как мы можем уменьшить размер и количество загружаемых файлов, правильно настроив структуру файлов и корректно используя статический импорт.
https://habr.com/ru/articles/962888/
#javascript #webpack #lazy_load #performance_optimization #web #webразработка #frontend #react #typescript #frontendразработка
-
🚀 Recent #Lodash updates focus on stronger #CI & #security posture!
✅ CI support expanded (Node 4 → 25)
🌐 New browser tests via #Playwright
📝 Docs now have dedicated CI
🔒 Added #OpenJS #CNA escalation policy
📊 Reporting #OSSF #Scorecard
🧯 New Incident Response Plan (#IRP)
🧠 Threat Model inspired by #Express & #Webpack
More details: https://blog.ulisesgascon.com/the-future-of-lodash
-
Reading about #LaravelMix (https://laravel-mix.com/) - it reminds me of #Gulp, which I dumped because lack of plugins were holding me back and I could do everything with #NPM scripts anyway.
But this freedom from complicated #Webpack config that I don't need/really understand is compelling. I wonder if a move back to something a little comfier is wise? Anyone hit any walls with this approach? #Laravel -
@graves501 The projects previously used #gulp, #sass and #webpack.
I chose #npm because I am the only maintainer and really just wanted something super basic.
I am not up to speed, but I regularly run audits and try to fix issues. 🫣 I should read up on it, I guess. 🤔 -
#ModuleFederation ist nicht nur für Greenfield-Projekte. Christian Siebmanns führt Sie durch die Implementierung in eine ausgereifte App – mit Infos zu Shared Deps, dynamischem Laden & Version 2.
-
Me trying to use webpack for the first time to create a bundle of the Monaco Editor:
```
webpack 5.76.1 compiled with 97 errors and 1 warning in 36838 ms
```Also me, trying to check the size on disk:
```
$ du -csh node_modules/
138M node_modules/
138M total
```My fellow frontend developers, what have you done?
-
I solved my JavaScript problem. The solution was to create a module.config.js file where you give a list of package name/local path to use instead of the installed one.
No idea whether it’s a WebPack or a React feature, or even a custom configuration of that particular project.
I still need a watch webpack or babel process in each component repo, in addition to app’s webpack-dev-server, because the latter watches the components’ dist folder. #JavaScript #React #WebPack
-
I tried `npm install ./relative/path`. I tried several variants of `npm link`. With link I can’t alias the package, and when building it can’t find some dependencies. With relative import it fails with dependencies, won’t see a package that’s clearly there, gives invalid errors in npm list, serve dev won’t refresh when I update the component.
I’m a code warrior. I’ve seen and dealt with some shit. But that’s draining my energy.
#JavaScript #WebPack #React -
JavaScript people: is there an npm equivalent to `pip install -e ../my-package` that actually works? I have a React app (built with WebPack) that I didn’t write that I need to customise. The parts I need to change are in components installed with npm. One is aliased and provides extra SCSS that extends another package. They’re built to a dist folder that makes editing impossible. I need to change the look and the behaviour. >>
-
Anybody worked out how to use CSP Nonce values with Fastify/helmet and Webpack/Vue? I can't see how to use a dynamically generated nonce with the statically built webpack'd vue
(and yes that word really is troublesome for British English speakers)
-
🗞️ Exciting update: #webpack now has an official Threat Model!
It sets clear boundaries, improves #security awareness, and strengthens our #ecosystem for everyone. 💪
github.com/webpack/security-wg/pull/9
-
Microfrontends in ein bestehendes System integrieren – ohne dass Builds, Releases und Abhängigkeiten kollidieren.
Der Artikel zeigt, welche Architektur- und CI-Strategien funktionieren und welche Fehler man nur einmal machen möchte.
https://javapro.io/de/microfrontends-mit-module-federation-fuer-bestehende-anwendungen-ein-erfahrungsbericht/#MicroFrontends #ModuleFederation #Webpack #TypeScript #WebDevelopment
-
90% legacy, 10% hope: Christian Siebmanns shares how his team retrofitted Module Federation into an existing app—without breaking everything. Lessons in builds, plugins & CI chaos: https://javapro.io/2025/07/24/integrating-micro-frontends-into-existing-applications-lessons-learned/
#MicroFrontends #ModuleFederation #Webpack #TypeScript #WebDevelopment
