Allow passing html-template options for each entry in 'mains'

[edmorley]

For multi-entrypoint projects, it's possible to add multiple entries to the Neutrino mains option, like so:

    mains: {
      index: 'entry-index.js',
      foo: 'entry-foo.js',
      bar: 'entry-bar.js',
    },

However in the web preset, the same html options property is used for each, which means there is no way to give the pages different titles or vary the template used.

For mozilla/treeherder's Neutrino v8 WIP, I'm currently working around this with:

    (neutrino) => {
      const entryHtmlOptions = {
        index: {
          // Page uses custom template instead of `html-webpack-template`'s
          template: 'index.html',
          inject: true,
        },
        foo: {
          title: 'Custom Page Title',
        },
        bar: {
          title: 'Another Page Title',
        },
      };
      Object.entries(entryHtmlOptions).forEach(([entry, options]) =>
        neutrino.config
          .plugin(`html-${entry}`)
          .tap(([defaultOptions]) => [{ ...defaultOptions, ...options }]));
    }

...but it seems likely that anyone using Neutrino's multi-entrypoint support is having to do something similar - so perhaps should be supported natively.

One way of doing so might be to permit the main's value to be an object (whilst still supporting the string form for the simple case). ie:

    mains: {
      index: {
        source: 'entry-index.js',
        html: {
          template: 'index.html',
          inject: true,
        },
      },
      foo: {
        source: 'entry-foo.js',
        html: {
          title: 'Custom Page Title',
        },
      },
      bar: {
        source: 'entry-bar.js',
        html: {
          title: 'Another Page Title',
        },
      },
    },

@mozilla-neutrino/core-contributors - thoughts?

[eliperelman]

I like the approach, but would probably hope for a flatter structure rather than nesting in an html property. Maybe we should consider dropping html-webpack-template before doing this?

[tangdw]

like this
vue-cli3-pages

[thany]

Exactly what I need, but if I use the entryHtmlOptions approach, how do I access those options in my mains? I was hoping they would go into process.env or even straight into window, but they are nowhere to be found... So how to use them? @edmorley

[timkelty]

@thany additional properties for each main are passed directly to html-webpack-plugin and used to build the templates (example usage: #1029 (comment)).

If you are building your own templates and want access to those, they should be available as htmlWebpackPlugin.options within the template (https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates).

It sounds like you're trying to use them in your entry point, but this issue/PR solely deals with passing options to html-webpack-plugin.

As for setting things on process.env, you can do that with the EnvironmentPlugin via the env option in @neutrinojs/web. Similarly you can set window with other webpack plugins…but I don't think there's an out-of-the-box way to configure those plugins differently per main. They are for your entire webpack build.

[thany]

I must say I'm not that savvy with neutrino/webpack, but you're absolutely right. I got around it, and this was just a kick in the right direction. Thanks!