[RFC] Plugins: Index Hooks

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

Taken from a comment in #17 (comment) in regards to a general discussion around the API and capturing the specific action item re: the hooks plugin type here.

Details

In particular index.html provides the most opportunity right now as things like polyfills, analytics, and PWA features like manifest.json and ServiceWorkers need to be installed in a global scope and /or unbundled. These would essentially be pre-defined find / replace hooks in index.html.

Usage

A great example use case is injecting Google Analytics into index.html.

In Greenwood's index.html we would add this marker

  ...

  <%= htmlWebpackPlugin.options.hookGreenwoodAnalytics %>

Then in Greenwood config, you tap into it like this:

module.exports = {
  title: 'My App'

  ...

  plugins: [{
    type: 'hook',
    provider: (compilation) => {
      // you can access things like config, context if you need from compilation
      return {
        hookGreenwoodAnalytics: `
          <!-- Google Analytics -->
          <script>
            window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
            ga('create', 'UA-XXXXXXX', 'auto');
            ga('send', 'pageview');
          </script>
          <script async src='https://www.google-analytics.com/analytics.js'></script>
          <!-- End Google Analytics -->
        `
      ]
    }
  }]
}

The Greenwood plugin equivalent would essentially just wrap all of this for a user and just ask for analyticsId.

It should be noted that if these specific hook types are too limiting (we should support a basic set of common hooks), users can just make their own index.html and configure all of these Greenwood hooks themselves (if they wanted) or just create their own.