[Question] How to override basic HtmlWebpackPlugin options in quasar.config?

[Arsync]

I'm trying to exclude specific chunk from index.html, but there is no 'html-webpack' plugin name in chain when quasar dev -m ssr is runned. But it exists when looking at quasar inspect.

// quasar.config.js
const
  path = require('path'),
  HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = function (ctx) {
  ...
  build: {
    ...
    chainWebpack(chain, { isClient }) {    
      if (isClient) {      

        chain.entry('sign-in-silent')
          .add('src/sign-in-slient.ts')
          .end();

        // Important! Need to exclude this entry from main 'index.html', where chunks: 'all'     
        // Not working as expected- there is no 'html-webpack' at run,
        // but exists at 'quasar inspect'
        //
        //chain.plugin('html-webpack')
        //  .tap(args => {
        //    args[0].excludeChunks = ['sign-in-silent'];
        //    return args;
        //  });
      
        chain.plugin('html-silent')
          .use(new HtmlWebpackPlugin({
            template: path.resolve('src/sign-in-silent.html'),
            filename: 'sign-in-silent/index.html',
            chunks: ['sign-in-silent']
          }));
      }
    }
  }
}

[rstoenescu]

Hi,

First step would be to look at current way that the html-webpack-plugin is created: https://github.com/quasarframework/quasar/blob/dev/app/lib/webpack/inject.html.js (think you already did that, but putting here for others too).

Then we need a little discussion. The guys over at html-webpack-plugin have released a beta version (4.x) and have updated the docs on their website for this beta version, even though the "latest" (and stable!) release is still 3.x. And there's no place for the 3.x version anymore (you need to go back in their repo's history -- removing the last 45-46 commits).
Bottom line, if excludeChunks does not works, it may be due to this reason (that it was added in 4.x).

On a sidenote, we will be upgrading to html-webpack-plugin 4.x as soon as it is stable.

[Arsync]

excludeChunks works correctly when quasar inspect, but there is no plugin 'html-webpack' in chain during quasar dev -m ssr:

So config can not be applied.
TypeError: Cannot set property 'excludeChunks' of undefined

[rstoenescu]

I need to apologize. I missed the most important part: SSR being the mode.
SSR cannot and does not use html-webpack-plugin.. it works completely differently.

What you want is to tamper with the preload and prefetch webpack plugins: https://github.com/quasarframework/quasar/blob/dev/app/lib/webpack/inject.preload.js

Edit: not what you are looking for.

[rstoenescu]

I believe that you are interested in vue-server-renderer/client -- https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/client-plugin.js

[Arsync]

I need to transform initial quasar setup of it's 'html-weback' to exclude my custom entry, like it done in quasar inspect:

[Arsync]

So how to pass my specific chunk name to exclude it from generated index.html?
I have registered the second entry 'src/sign-in-silent.js', it looks like:

entry: {
  app: [
    ...
    [length]: 3
  ],
  'sign-in-silent': [
    ...
    [length]: 3
  ]
}

Both will be included in the default HtmlWebpackPlugin with its option chunks: 'all'.

[rstoenescu]

So to eliminate the confusion:

1. SSR does NOT uses html-webpack-plugin. This is handled by vue-server-renderer package, which is supplied by Vue team.
2. When you hit "$ quasar inspect" (without specfying the mode), you're printing out the chain for SPA mode. To print it for SSR: "$ quasar inspect -m ssr".

But a question arises: why are you pushing a new entry? Seems to me that you want something (don't know yet what exactly) but you are hacking your way around it in a bad manner...
So please tell me what you want to achieve, rather than how you want to achieve it.

[Arsync]

There is one 'standalone' thing in oidc-client, which always runned within iframe: example.
It runned on client side, while oidc-client is just npm package from 'node_modules'. So why not to use tree shaking?

Direct access to files in node_modules from browser is bad idea, manual copying from node_modules is not our way too.

I've push it as another entry without quasar, vue or other things with checking 'chainWebpack -> isClient true'. Just for oidc token background refresh process.

Details of implementation here.

[Arsync]

It becomes just the feature request - allow option of 'quasar.config.js' to pass custom 'excludeChunks' to the default HtmlWebpackPlugin of Quasar.

[ejez]

const merge = require('webpack-merge');

module.exports = function (ctx) {
  return {
...
    build: {
      chainWebpack (chain) {
        chain.plugin('html-webpack').tap(args => [ merge(args[0], {
          excludeChunks: ['sign-in-silent'],
          template: '/path/to/my/template.html',
          filename: 'myindex.html',
          title: 'My App',
          ...
        })]);
      }
...

[Arsync]

But there is nothing to chain as html-webpack in ssr mode.

[rstoenescu]

I'm sorry but vue-server-renderer does not allow to exclude chunks. There's nothing we can do within Quasar.

[Arsync]

It builds two parts in ssr anyway - for ssr and for spa. Second thing can generate right things. Its just injection into chain to control html-webpack over ssr for client-side step.

[thexeos]

For anyone looking for a solution, you can patch the local file (on your development machine) to accept excludeChunks list from the config.

node_modules@quasar\app\lib\webpack\inject.html.js

    .use(HtmlWebpackPlugin, [{
      filename: getHtmlFilename(cfg),
      template: appPaths.resolve.app(cfg.sourceFiles.indexHtmlTemplate),
      minify: cfg.__html.minifyOptions,
      templateParameters: templateParam || cfg.htmlVariables,
      chunksSortMode: 'none',
+     excludeChunks: cfg.excludeChunks,
      // inject script tags for bundle
      inject: true,
      cache: true
    }])

quasar.conf.js

module.exports = function () {
  return {
+    excludeChunks: ['sing-in-silent', 'you-custom-bundle-name', 'more-chunks-to-exclude'],

This works, because dev-server (node_modules\@quasar\app\lib\webpack\inject.html.js) uses the same inject.html.js file to prepare index.html, but it does so directly without using chainWebpack.

Ideally, we'd get chainDevWebpack or similar in config file, however I can only think of this use case for it.