Is Vite Faster Than Turbopack?, by @gill_kyle@x.com:

https://www.kylegill.com/essays/vite-vs-turbopack/

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.

https://pbs.bartificer.net/pbs176

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/

Webpack vs Vite: Which Bundler is Right for You?

https://www.syncfusion.com/blogs/post/webpack-vs-vite-bundler-comparison?utm_source=alvinashcraft&utm_medium=email&utm_campaign=alvinashcraft_blog_edmdec24
#webdev #vite #javascript #webpack #webdevelopment

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.

https://mariusgundersen.net/live-reload/

How to solve "Module parse failed: Bad character escape sequence" https://jsdev.space/howto/bad-character-escape-nextjs/ #javascript #nextjs #webpack

You can send query params to a #javascript module at import time

import "./mymodule.js?hello=world"

and then read them from import.meta.url

const hello = new URL(import.meta.url).searchParams.get('hello');

It does get a little hairy if you’re using a bundler like #webpack, #vite or #parcel

https://esimmler.com/passing-url-params-to-js-modules

I got to spend a little time on some hobby-coding this weekend, and I updated my template repo for nodejs frontend apps.

The reason is that I wanted minification (actually obfuscation) and that required doing things differently for development versus production builds.

Fortunately webpack has a pretty elegant solution for all that, and it didn't take me very long to figure it out, so that's in the template repo now.

https://github.com/NinovanderMark/TemplateWebpackFrontend

WebpackからViteに移行するとどのくらい速くなるのか
https://qiita.com/hamada1207jyo/items/aa0b79ec13718f978328?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#Rspack 1.0 is now production-ready!

A new #JavaScript bundler designed to be fully compatible with #Webpack, supporting 40+ of the top 50 Webpack plugins.

Details on #InfoQ https://bit.ly/3Y5jp5F

How to Create a Custom Webpack Plugin https://jsdev.space/howto/custom-webpack-plugin/ #javascript #nodejs #webpack

Taking upon the challenge of making this #NodeJs project more user friendly that non-tech users can also use the tool.

Gotten to the point that one can run the code locally and receive the POIs. The image shows a preliminary mask of how the website might look like.

The trickiness of the task is that the tool uses the fs package which doesn’t directly have a similar package for the web. One can compress a lot of the code with #webpack while using plugins like #pollyfill and #babel. These resolve all the issues other than I/O of files.

It seems like a possible solution to deal with the fs issue is to use the various database and storage solutions of a browser.

@marquisdegeek

In case you want to try @rspack_dev, do not forget to use `lazyCompilation: isDev,` it brings a lot of speed thanks to @rustlang

#webpack #nodejs getting faster by the help of #rust

https://rspack.dev/config/experiments

Hey #Webpack #Vue people.
I have some generated css-file which originally had full URIs configured for some third-party images I have no control over.
I want to get rid of this external dependency, and proxy these through a local server without having to hard-code the domain name.
The css-file is included through an scss-file.

Previous:
image: url(http:…)
Now:
image: url(/…)

I expected this to "just work", but Webpack fails with "Module not found".
Config in question: https://github.com/HabitRPG/habitica/blob/v5.26.1/website/client/vue.config.js

Sviluppo di un’interfaccia web con TypeScript, React e Webpack - Lorenzo Savini
hhttps://www.youtube.com/watch?v=J55oIFzXxTA&list=PLPGJdxeQ35eAHgEfkfChN_8gN5CJCF9tw&index=15

Introduciamo #TypeScript, vediamo come si integra in un’applicazione #React e come si generano gli asset finali della nostra interfaccia utilizzando #Webpack.

再exportの修正をしてバンドルサイズを約30%削減した
https://qiita.com/kyntk/items/db0f6fdc1024f31d81e5?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items