feat: add support for html-webpack-plugin 4.x

jantimon · Aug 14, 2019 · 94ead15 · 94ead15
1 parent 0299daf
commit 94ead15
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 59 deletions.
diff --git a/src/compat.js b/src/compat.js
@@ -14,5 +14,13 @@ module.exports.tap = (tappable, hook, name, plugin) => (
   : tappable.plugin(hook, plugin)
 );
 
+module.exports.tapHtml = (tappable, name, plugin) => {
+  const HtmlWebpackPlugin = require('html-webpack-plugin');
+  return HtmlWebpackPlugin.getHooks /* HtmlWebpackPlugin >= 4.0 */
+    ? HtmlWebpackPlugin.getHooks(tappable).afterTemplateExecution.tapAsync(name, plugin)
+    : module.exports.tap(tappable, 'html-webpack-plugin-before-html-processing', name, plugin)
+  ;
+};
+
 /* istanbul ignore next */
 module.exports.getContext = (loader) => (loader.options && loader.options.context) || loader.rootContext;
diff --git a/src/compiler.js b/src/compiler.js
@@ -49,7 +49,7 @@ module.exports.run = ({prefix, favicons: options, logo, cache}, context, compila
         };
       }
 
-      return resolve(result.html);
+      return resolve(result.tags);
     });
   });
 };

diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,7 @@
 const assert = require('assert');
 const child = require('./compiler');
 const Oracle = require('./oracle');
-const {tap} = require('./compat');
+const {tap, tapHtml} = require('./compat');
 
 module.exports = class FaviconsWebpackPlugin {
   constructor(args) {
@@ -40,15 +40,14 @@ module.exports = class FaviconsWebpackPlugin {
     tap(compiler, 'make', 'FaviconsWebpackPlugin', (compilation, callback) =>
       // Generate favicons
       child.run(this.options, compiler.context, compilation)
-        .then(result => {
+        .then(tags => {
           if (this.options.inject) {
             // Hook into the html-webpack-plugin processing and add the html
-            tap(compilation, 'html-webpack-plugin-before-html-processing', 'FaviconsWebpackPlugin', (htmlPluginData, callback) => {
-              const htmlPluginDataInject  = htmlPluginData.plugin.options.inject && htmlPluginData.plugin.options.favicons !== false;
+            tapHtml(compilation, 'FaviconsWebpackPlugin', (htmlPluginData, callback) => {
+              const htmlPluginDataInject = htmlPluginData.plugin.options.inject && htmlPluginData.plugin.options.favicons !== false;
               if ( htmlPluginDataInject || this.options.inject === 'force') {
-                  let position = htmlPluginData.html.search(/<\/head>/i);
-                  position = position === -1 ? htmlPluginData.html.length : position;
-                  htmlPluginData.html = [htmlPluginData.html.slice(0, position), result, htmlPluginData.html.slice(position)].join('');
+                  const idx = (htmlPluginData.html + '</head>').search(/<\/head>/i);
+                  htmlPluginData.html = [htmlPluginData.html.slice(0, idx), ...tags, htmlPluginData.html.slice(idx)].join('');
               }
               return callback(null, htmlPluginData);
             });

diff --git a/src/loader.js b/src/loader.js
@@ -20,11 +20,9 @@ module.exports = function (content) {
 
   // Generate icons
   return favicons(content, Object.assign(query.options, {path: url.resolve(path, prefix)}))
-    .then(result => {
-      const html = result.html.join('');
-      const assets = [...result.images, ...result.files].map(({name, contents}) => ({name: prefix + name, contents}));
-
-      return callback(null, 'module.exports = ' + JSON.stringify(msgpack.encode({html, assets}).toString('base64')));
+    .then(({html: tags, images, files}) => {
+      const assets = [...images, ...files].map(({name, contents}) => ({name: prefix + name, contents}));
+      return callback(null, 'module.exports = ' + JSON.stringify(msgpack.encode({tags, assets}).toString('base64')));
     })
     .catch(callback);
 };

diff --git a/test/fixtures/expected/html/index.html b/test/fixtures/expected/html/index.html
@@ -1,9 +1 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Webpack App</title>
-  <link rel="shortcut icon" href="/assets/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png"><link rel="manifest" href="/assets/manifest.json"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#fff"><meta name="application-name"><link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-320x460.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x920.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x1096.png"><link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-750x1294.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1182x2208.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1242x2148.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-748x1024.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-768x1004.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1496x2048.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1536x2008.png"><link rel="icon" type="image/png" sizes="228x228" href="/assets/coast-228x228.png"><meta name="msapplication-TileColor" content="#fff"><meta name="msapplication-TileImage" content="/assets/mstile-144x144.png"><meta name="msapplication-config" content="/assets/browserconfig.xml"><link rel="yandex-tableau-widget" href="/assets/yandex-browser-manifest.json"></head>
-  <body>
-  </body>
-</html>
+<!doctype html><html><head><link rel="shortcut icon" href="/assets/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png"><link rel="manifest" href="/assets/manifest.json"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#fff"><meta name="application-name"><link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-320x460.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x920.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x1096.png"><link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-750x1294.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1182x2208.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1242x2148.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-748x1024.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-768x1004.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1496x2048.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1536x2008.png"><link rel="icon" type="image/png" sizes="228x228" href="/assets/coast-228x228.png"><meta name="msapplication-TileColor" content="#fff"><meta name="msapplication-TileImage" content="/assets/mstile-144x144.png"><meta name="msapplication-config" content="/assets/browserconfig.xml"><link rel="yandex-tableau-widget" href="/assets/yandex-browser-manifest.json"></head><body></body></html>
diff --git a/test/fixtures/expected/nohtml/index.html b/test/fixtures/expected/nohtml/index.html
@@ -1,9 +1 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Webpack App</title>
-  </head>
-  <body>
-  </body>
-</html>
+<!doctype html><html><head></head><body></body></html>
diff --git a/test/fixtures/expected/prefixed/index.html b/test/fixtures/expected/prefixed/index.html
@@ -1,9 +1 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Webpack App</title>
-  <link rel="shortcut icon" href="/custom/prefix/5026ef56/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="/custom/prefix/5026ef56/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/custom/prefix/5026ef56/favicon-32x32.png"><link rel="manifest" href="/custom/prefix/5026ef56/manifest.json"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#fff"><meta name="application-name"><link rel="apple-touch-icon" sizes="57x57" href="/custom/prefix/5026ef56/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/custom/prefix/5026ef56/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/custom/prefix/5026ef56/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/custom/prefix/5026ef56/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/custom/prefix/5026ef56/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/custom/prefix/5026ef56/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/custom/prefix/5026ef56/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/custom/prefix/5026ef56/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/custom/prefix/5026ef56/apple-touch-icon-180x180.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/custom/prefix/5026ef56/apple-touch-startup-image-320x460.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/custom/prefix/5026ef56/apple-touch-startup-image-640x920.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/custom/prefix/5026ef56/apple-touch-startup-image-640x1096.png"><link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/custom/prefix/5026ef56/apple-touch-startup-image-750x1294.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/custom/prefix/5026ef56/apple-touch-startup-image-1182x2208.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/custom/prefix/5026ef56/apple-touch-startup-image-1242x2148.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/custom/prefix/5026ef56/apple-touch-startup-image-748x1024.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/custom/prefix/5026ef56/apple-touch-startup-image-768x1004.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/custom/prefix/5026ef56/apple-touch-startup-image-1496x2048.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/custom/prefix/5026ef56/apple-touch-startup-image-1536x2008.png"><link rel="icon" type="image/png" sizes="228x228" href="/custom/prefix/5026ef56/coast-228x228.png"><meta name="msapplication-TileColor" content="#fff"><meta name="msapplication-TileImage" content="/custom/prefix/5026ef56/mstile-144x144.png"><meta name="msapplication-config" content="/custom/prefix/5026ef56/browserconfig.xml"><link rel="yandex-tableau-widget" href="/custom/prefix/5026ef56/yandex-browser-manifest.json"></head>
-  <body>
-  </body>
-</html>
+<!doctype html><html><head><link rel="shortcut icon" href="/custom/prefix/5026ef56/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="/custom/prefix/5026ef56/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/custom/prefix/5026ef56/favicon-32x32.png"><link rel="manifest" href="/custom/prefix/5026ef56/manifest.json"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#fff"><meta name="application-name"><link rel="apple-touch-icon" sizes="57x57" href="/custom/prefix/5026ef56/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/custom/prefix/5026ef56/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/custom/prefix/5026ef56/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/custom/prefix/5026ef56/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/custom/prefix/5026ef56/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/custom/prefix/5026ef56/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/custom/prefix/5026ef56/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/custom/prefix/5026ef56/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/custom/prefix/5026ef56/apple-touch-icon-180x180.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/custom/prefix/5026ef56/apple-touch-startup-image-320x460.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/custom/prefix/5026ef56/apple-touch-startup-image-640x920.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/custom/prefix/5026ef56/apple-touch-startup-image-640x1096.png"><link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/custom/prefix/5026ef56/apple-touch-startup-image-750x1294.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/custom/prefix/5026ef56/apple-touch-startup-image-1182x2208.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/custom/prefix/5026ef56/apple-touch-startup-image-1242x2148.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/custom/prefix/5026ef56/apple-touch-startup-image-748x1024.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/custom/prefix/5026ef56/apple-touch-startup-image-768x1004.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/custom/prefix/5026ef56/apple-touch-startup-image-1496x2048.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/custom/prefix/5026ef56/apple-touch-startup-image-1536x2008.png"><link rel="icon" type="image/png" sizes="228x228" href="/custom/prefix/5026ef56/coast-228x228.png"><meta name="msapplication-TileColor" content="#fff"><meta name="msapplication-TileImage" content="/custom/prefix/5026ef56/mstile-144x144.png"><meta name="msapplication-config" content="/custom/prefix/5026ef56/browserconfig.xml"><link rel="yandex-tableau-widget" href="/custom/prefix/5026ef56/yandex-browser-manifest.json"></head><body></body></html>