How to add attribute to script tags?

[micahjon]

Hi, I'd like to add an onerror handler for script loading failures, and am a bit stumped as to how to go about this.

I know html-webpack-plugin is used for generating HTML, and I figured the alterAssetTags hook would be the one to try:
https://github.com/jantimon/html-webpack-plugin#alterassettags-hook

Is adding a new webpack plugin as simple as appending it to config.plugins?

// preact.config.js
import MyPlugin from './webpack-plugin.js';

export default function (config, env, helpers, options) {
  // Is this how you add a Webpack plugin?
  config.plugins.push(new MyPlugin());
}

I tried doing this and am seeing some logs showing up from my plugin but not others:

// webpack-plugin.js
import HtmlWebpackPlugin from 'html-webpack-plugin';

// Code adapted from README: https://github.com/jantimon/html-webpack-plugin#afteremit-hook
export default class MyPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
      console.log('good news, this is logged');
      HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync(
        'MyPlugin',
        (data, cb) => {
          console.log('...but this is never logged!');
          cb(null, data);
        }
      );
    });
  }
}

It seems that the tapAsync callback is never called. Any ideas as to why?

Thanks a million!

[rschristian]

I'll go through why this doesn't work first, feel free to skip to the end to get my recommended solution though.

First things first, yes, that is a valid way to add a plugin to the Webpack config. However, Preact-CLI has two distinct builds: the server, bundling content for execution in Node to prerender your app, and the client, which is the stuff destined for the browser. As such, html-webpack-plugin is not ran on the server builds (as HTML is strictly for the browser). We'd adjust your config to look like the following:

// preact.config.js
import MyPlugin from './webpack-plugin.js';

export default function (config, env, helpers, options) {
  if (!env.isServer) {
      config.plugins.push(new MyPlugin());
  }
}

Secondly, you're using an incorrect version of html-webpack-plugin. As you're not seeing immediate errors with .getHooks() (which is only available in v4+, while we're on v3), I'm guessing you've installed your own version of the plugin. The different versions are essentially distinct plugins, hence why your code will not work.

This should do the trick however:

// Code adapted from README: https://github.com/jantimon/html-webpack-plugin#afteremit-hook
export default class MyPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
      console.log('good news, this is logged');
      compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(
        'MyPlugin',
        (data, cb) => {
          console.log('great news, this is logged too!');
          cb(null, data);
        }
      );
    });
  }
}

---

But, is there a particular reason you are not just editing your template.html?

If you weren't aware, <% preact.headEnd %> & <% preact.bodyEnd %> are replaced by head-end.ejs and body-end.ejs respectively. We've abstracted those as they're a bit much for beginners, but there's no reason why you couldn't copy those into your template.html, albeit with the modifications you want to make to the script tags.

This has the added benefit of not requiring you mess with Webpack plugins, but up to you of course.

[micahjon]

Hey @rschristian , great call on just modifying template.html. Thanks a million for the detailed explanation!

[rschristian]

Improving the docs (well, creating them really) is on my todo list. Apologies for that being rather lacking at the moment.

The upcoming v4 should also make the head & body templates quite a bit less gnarly looking (and therefore less scary to copy/paste perhaps). Might move them directly into the default template to increase transparency there.

[rschristian]

This is what the template.html file will look like in the next version. Hopefully that'll make it clearer & easier to make the adjustments you wanted to here.