Webpack / vite tooling support

maybe you can add webpack extension …
this is so usefull for users

Just curious, what would be a use case that you would want to use Webpack?

  1. smaler = faster
  2. compact code
  3. easy use

we are voip telecom operator and we need to write fast code and fast modification…

+1 for this. I regularly use Laravel Mix as it’s a very nice abstraction on top of Webpack and makes for a fantastic frontend asset pipeline. I even use it with node.js projects; have it output a manifest file and I wrote a Pug filter to dynamically insert the fingerprinted assets into my layout template. Works amazingly well.

I usually like to combine and minify the vendor-specific assets and keep my app specific code separate, as the vendor assets rarely update as much as my app specific code.

Many thanks.

3 Likes

This would be a game changer for me, yes, yes, yes please.

I did this manually using
http://rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html
a couple months back and it took me a week to get it working, but the site speed was “varvy” good afterwards. That wasnt a spelling mistake, thats dork humour at its finest.

2 Likes

Just bumping this thread as it would be really useful for Wappler to have webpack support. Also an option for minifying php/html pages and css/js files would be good.

5 Likes

Just throwing https://www.snowpack.dev/ into the contest.

Just a status update - we are looking in webpack integration as it is indeed very useful for packaging and publishing.

File bundling however is not really needed any more with http/2 and no longer recommended:

Key things:

  • Stop Concatenating Files
  • Stop Inlining Assets
  • Stop Sharding Domains

and in the meantime in 2020 http/2 enjoys a nice coverage:

https://w3techs.com/technologies/details/ce-http2

and even http/3 is coming up:

5 Likes

Hi @George

And thanks for looking into it, this is the only thing today missing in Wappler which is stopping me of purchasing a Wappler license subscription for the long term.

Also even with HTTP2&3, it is in my opinion always interesting to use webpack to thin out all CSS files for example and remove unused attributes.

This Stackoverflow post that resume also nicely things (I think), even if it’s a bit old:

Really hope to see it soon and thank you once again for the fantastic product that is Wappler.

Cheers

1 Like

We should probably go for Vite instead of webpack as @JonL suggests.

See https://vitejs.dev/

It is much better, delivers faster results and far less bloater and easier to configure than webpack.

3 Likes

What is it for or what does it do?

Those are bundlers, they bundle source code together. With modern JavaScript many code is written as modules, you then import that module within your script so that you can use it. The problem is that you have a lot a javascript files and the bundlers will collect all code and create a single JavaScript file from that. They also do optimization like removing unused code and other transformations like minify and compatibility for older browsers.

Not sure what the advantage would be within Wappler since we don’t use modules and most of our files are already minified. If you are working on JavaScript code these bundlers are almost a must-have, all JavaScript includes that you use are often created with one of these bundlers.

I think it’s something that should come eventually if you guys move towards ES modules, which I am guessing you will at some point in time.

Also I think the Theme Manager could get some refactoring and move from Wappler’s custom json implementation to using a CSS pre-processor implementation(SASS, LESS, Stylus, etc). That way we could throw in a 3rd party theme and the Theme manager could pick up all the variables, mixins, etc.

I personally don’t use the Theme Manager because it kind of locks you in Wappler json format to build the themes. If it were based on standards it would be more in line with Wappler’s philosophy. Right now it’s kind of a deviation.

If wappler used pre-processors Vite would be useful too.

TS out-of-the-box support is also a plus. I wouldn’t mind writing extensions in TS.

Is something like Vite needed now? As you mention, not at all. But if Wappler evolves following current development trends I guess it’s a must.

2 Likes

Hey JonL, reg TS, read what George said Wappler needs to be rewritten in TypeScript

Yeah. I was involved in that conversation. Still I wouldn’t mind writing extensions in TS.

Not that its a necessity but if it’s an option it’s not a bad one. I’m quite ok with plain js too :slight_smile:

Can you already write extensions in wappler, for example, if I want to bring reactjs or any ui frameworks, can I do it?
Regarding TS, without it, frameworks like deno/fresh wouldn’t be possible to support.

Bump. Seems like many of us are exploring SDKs and packages now and running into bundler requirements.

Another bump.
[warn] The bundledWebRuntime configuration option has been deprecated. Please, use a bundler to bundle Capacitor and its plugins.

For using Capacitor plugins (or any npm package) you have to use a bundler (such as vite, webpack, etc), so when you do import { Something } from 'some-npm-package';, it picks the appropriate code from node_modules and bundles it with your app.

1 Like