build spa / pwa with all css, js & assets inlined in main .html file

[s-light]

Hello community,

i want to build a single-file web app -
the application itself is a very simple countdown-timer - nothing special - its more a practicing task i give to my self.

the challenge: how to setup quasar / webpack to inline / embed all the css & js & other assets?
(in my example its a small audio file)

i have found some older info - but nothing really up to date..

• [SOLVED] Quasar build. Single inlined HTML file. (Mar 19, 2021)
• https://github.com/kmalakoff/html-webpack-inline-source-plugin/tree/master
• https://github.com/KyLeoHC/inline-source-webpack-plugin

i did not try them yet.

has anybody any tips how to do this?
or keywords to search with?!

sunny greetings
stefan

[alexrififi]

Try richardtallent/vite-plugin-singlefile

[s-light]

thanks!
that sounds like exactly what i was looking for.

currently i am using webpack ( do not want to learn another tool at the moment) -
do you know of any similar up to date plugin / tutorial for webpack?

[alexrififi]

I don’t know plugin / tutorial for webpack, since the new year I stopped using it and switched to vite

[s-light]

can you give an example how to configure this in the quasar.config.js?
i tried with all these recommend ways

build: {
   // extendViteConf (viteConf) {},
   // viteVuePluginOptions: {},

   vitePlugins: [
       [
           "@intlify/vite-plugin-vue-i18n",
           {
               include: path.resolve(__dirname, "./src/i18n/**"),
           },
       ],
       // ["vite-plugin-singlefile", {}],
       //    acc.push((plugin.default || plugin)(opts))
       //                       ^
       //TypeError: (plugin.default || plugin) is not a function

       [require("vite-plugin-singlefile"), {}],

       // [require("vite-plugin-singlefile").default, {}],
       //  App • ⚠️  quasar.config.js > invalid Vite plugin specified: undefined
       //  App • ⚠️  Correct form: [ 'my-vite-plugin-name', { /* opts */ } ] or [ pluginFn, { /* opts */ } ]
   ],
...

and if i do a quasar inspect -d
i find the plugin

 viteSingleFile: <ref *3> [Function: viteSingleFile] {
        [length]: 0,
        [name]: 'viteSingleFile',
        [prototype]: {
          [constructor]: [Circular *3]
        }
      }

but when building with quasar build --debug i see no change of the index.html. regardless if the plugin is commented or active..

[s-light]

in the meantime i switched to vite and the mentioned plugin vite-plugin-singlefile
and this just works :-)