"Don’t use [chunkhash] in development since this will increase compilation time"
https://codeburst.io/long-term-caching-of-static-assets-with-webpack-1ecb139adb95#.oibt9ye3h #webdev #webpack
Микрофронтенд на пальцах с module federation 2.0
Микрофронтенд на пальцах с module federation 2.0. Как собрать микрофронты из кубиков без магии по шагам.
Сборщики Frontend и когда их применять
Привет, друзья! В этой статье вы узнаете ключевые возможности и отличия трёх популярных сборщиков Frontend-разработки: Webpack, Vite и Parcel. Также вы сравните использование этих сборщиков на практике и узнаете, как выбрать сборщик для своего проекта.
Is Vite Faster Than Turbopack?, by @gill_kyle@x.com:
@cwebber And by the way, I just came across this:
```
error: node-webpack@5.98.0: dependency cycle detected:
node-webpack@5.98.0 -> node-terser-webpack-plugin@5.3.14 -> node-webpack@5.98.0 -> node-mdx-js-loader@3.1.0
```
Circular dependency on first try!
Снимаем оковы Webpack: как мы ускорили сборку проекта в 10 раз, потратив меньше рабочего дня
Современная фронтенд-разработка технологически весьма сложная: множество зависимостей, микросервисы, размеры самих проектов, плагины для настройки окружения и многое другое. Это касается и одного из самых ключевых этапов в разработке - сборка проекта. Множество проектов, на которых я работал, собирались (и собираются) с помощью Webpack. Это классический и проверенный временем инструмент: со своими преимуществами и недостатками. В какой-то момент недостатки стали перешивать:
Webpack, Vite или Rspack: что это за зоопарк или как собирать микрофронтенды в 2025?
Привет! Разбираясь с микрофронтендами в монорепозитории для проекте с Vue3 пришёл к выводу, что так много уделяется внимания гибкости в построении архитектуры и бизнес-задачам, что все боятся заниматься улучшением "условий труда" связанных со сборкой приложения! Решил что эта задачка как раз мне подходит и представляю вашему вниманию небольшую статью которая возможно поможет вам сделать выбор или подтолкнет попробовать новые инструменты сборки фронтенда! Для справки - микрофронтенды у нас на Module Federation, Nx для управления монорепозиторием, общаемся мы через GraphQL, тестируем с Jest и конечно куда без TypeScript. Проект активно развивается, и с ростом его масштабов столкнулись с вопросом: какой сборщик лучше всего справится с нашими задачами? Webpack уже давно с нами, но его медлительность заставляет искать альтернативы. Vite обещает молниеносную разработку, а Rspack — производительность без сложной миграции. Давайте разберёмся, что подойдёт именно нам — и, возможно, вам.
Even though I'm a backend developer I've got to keep abreast of some frontend stuff so that I can lend my general developer brain to designing or advising or fixing things wherever it happens, and it looks like I've now got to get up to speed on #Preact and #TailWind and #WebPack for the next phase of work. That'll keep me busy for a bit.
Way back in September of 2022, @bart finished off the Webpack miniseries by leaving it as an exercise for the student to deploy their web apps to GitHub Pages. Bart closes that circle in this installment while teaching us how to use GitHub Actions.
Meme Roulette Chrome Extension
Crafting a Chrome Extension: TypeScript, Webpack, and Best Practices Cendekia ・ Feb 13 #typescript #chrome #extensions #webpack source
https://devnews.tech/meme-roulette-chrome-extension/?utm_source=mastodon&utm_medium=jetpack_social
I just realised: I've been intentionally postponing getting into the guts of #webpack for so long, that it got "deprecated" and I no longer have to \o/
Порты в веб-разработке: от локальной разработки до продакшена
Эта статья предназначена в первую очередь для веб-разработчиков. Я не являюсь экспертом в области сетей, администрирования или DevOps, поэтому представленный материал не углубляется в сетевые аспекты. Из любопытства, я как то задался вопросом практического использования разных номеров портов: что они означают для разработчиков, почему используются определенные порты, и какие приложения чаще всего запускаются на них. Цель статьи — пролить немного света на эти “магические” циферки с точки зрения их прикладного применения веб-разработчиками. Исторически приложения на Node.js (например, с использованием фреймворков Nest.js или Express) и Webpack по умолчанию запускаются на 3000 порту, если не вносить изменения в базовую конфигурацию. Vite, напротив, изначально использует порт 5173. Это может быть связано с отсылкой к названию "Vite" (если подключить немного воображения). С технической точки зрения нет разницы, на каком порту запускать локальный сервер для разработки — это может быть 1050, 10900 или любой другой. Главное, чтобы порт был:
Another try, and I'm giving up once again 
I just can't upgrade my whole build setup to use #webpack + #typescript + #esmodules for both the app code and the test suite. Something always breaks. I lose *hours* reading github issues and stuff, trying stuff left and right, trying to switch to this or that, nothing works entirely, and it never breaks the same way.
That kind of nonsense will end up with me abandoning my side project 
Как мы мигрируем с JQuery на React
Вокруг все говорят о серверных компонентах реакта, о серверном рендеринге, и разных новшествах в мире фронтенде. Как будто JQuery в один миг взял и исчез. Несмотря ни на что он всё ещё остаётся самой популярной библиотекой 
. Сегодня я вам расскажу, как мы постепенно мигрируем с JQuery на React.
Microfronends as a #decentralized alternative to #npm.
While i can smush everything into a #monoRepo, i wanted to explore the idea of using #Microfrontends as a kind-of self managed alternative to #npm.
Microfronends have been around for a while and i've come across many different approaches. I want to share how im using microfrontends in my project.
Im using #Webpack 5 #moduleFederation to create the #microfrontend. there are some interesting features that i dont think are being mentioned elsewhere:
- Dynamic Remotes: Modules can be loaded from various endpoints. We can use a custom function to ping different URLs and determine the fastest one for loading the required module.
- #Selfhosters can manage modules independently, enhancing control over updates and #security on #opensource projects.
- Development Experience: By using dynamic-remotes and running modules locally during development, it can speed up testing and iteration.
- Scalability: The approach allows for #CDN scaling with module deployments on multiple cloud providers. currently, my redundencies are on AWS S3 + github-pages... but i can see how this can be scaled to more cloud providers.
Im aiming for the architecture to look like the following. Let me know your thoughts on my approach and if its something you would consider for your project.
https://positive-intentions.com/blog/decentralised-architecture
https://positive-intentions.com/blog/statics-as-a-chat-app-infrastructure
Правильные ли у вас микрофронты?
Как избежать типичные ошибки при внедрении микрофронтов и какие инструменты упрощают жизнь разработчикам. Рассмотрим плохие примеры разделение кода приложения, т.е. когда "архитектор" или лид проекта, не умеют микрофронты готовить. А разработчикам нужно с этим жить.
I wrote a quick article on how to make a live-reload plugin for webpack. It was fun to make this for the very specific scenario I needed it for (where I couldn't use dev server or hot reloading), so I figured I would share how it works.
Как сделать один плагин сразу для всех сборщиков фронтенда?
Здравствуйте, товарищи! Сегодня мы снова поговорим про тулинг для фронтенда. В этот раз обсудим разработку плагинов для сборщиков, таких как: Webpack, Vite, esbuild и подобных. За основу мы возьмем Unplugin . Короткий ответ на вопрос из заголовка: пока никак. Чуть более длинный - изображен на обложке. А в качестве полноценного ответа, предлагаю вам эту статью. Попробуем хотя бы приблизиться к заявленному результату. Сразу стоит уточнить: это не туториал, а скорее case-study.
How to solve "Module parse failed: Bad character escape sequence" https://jsdev.space/howto/bad-character-escape-nextjs/ #javascript #nextjs #webpack
