feat: add support for Webpack 4

jantimon · Aug 14, 2019 · 9db88ee · 9db88ee
1 parent ba5e87b
commit 9db88ee
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -33,6 +33,8 @@ as appropriate for iOS devices, Android devices, Windows Phone and various deskt
 
 In combination with [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) it will also inject the necessary html for you:
 
+> **Note**: `html-webpack-plugin` _must_ come before `webapp-webpack-plugin` in the plugins array.
+
 ```html
 <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">

diff --git a/index.js b/index.js
@@ -38,7 +38,7 @@ FaviconsWebpackPlugin.prototype.apply = function (compiler) {
     this.options.favicons.developerURL = guessDeveloperURL(compiler.context);
   }
 
-  // Generate the favicons
+  // Generate favicons
   let compilationResult;
   compiler.plugin('make', (compilation, callback) => {
     childCompiler.compileTemplate(this.options, compiler.context, compilation)
@@ -49,22 +49,29 @@ FaviconsWebpackPlugin.prototype.apply = function (compiler) {
       .catch(callback);
   });
 
-  // Hook into the html-webpack-plugin processing
-  // and add the html
-  if (this.options.inject) {
-    compiler.plugin('compilation', (compilation) => {
-      compilation.plugin('html-webpack-plugin-before-html-processing', (htmlPluginData, callback) => {
-        if (htmlPluginData.plugin.options.favicons !== false) {
-          htmlPluginData.html = htmlPluginData.html.replace(
-            /(<\/head>)/i, compilationResult.join('\n') + '$&');
+  const htmlWebpackPluginBeforeHtmlProcessing = (plugin) => {
+    if (compiler.hooks) /* Webpack >= 4.0 */ {
+      compiler.hooks.compilation.tap('HtmlWebpackPluginHooks', (compilation) => {
+        if (compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing) {
+          compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync('WebappWebpackPluginInjection', plugin);
         }
-        callback(null, htmlPluginData);
       });
     } else {
-      compiler.plugin('compilation', function (compilation) {
-        compilation.plugin('html-webpack-plugin-before-html-processing', addFaviconsToHtml);
+      compiler.plugin('compilation', (compilation) => {
+        compilation.plugin('html-webpack-plugin-before-html-processing', plugin);
       });
     }
+  };
+
+  // Hook into the html-webpack-plugin processing
+  // and add the html
+  if (this.options.inject) {
+    htmlWebpackPluginBeforeHtmlProcessing((htmlPluginData, callback) => {
+      if (htmlPluginData.plugin.options.favicons !== false) {
+        htmlPluginData.html = htmlPluginData.html.replace(/(<\/head>)/i, compilationResult.join('\n') + '$&');
+      }
+      callback(null, htmlPluginData);
+    });
   }
 };
 

diff --git a/lib/compiler.js b/lib/compiler.js
@@ -53,8 +53,16 @@ module.exports.compileTemplate = function compileTemplate (options, context, com
       } else if (err) {
         reject(err);
       } else {
+        const getAssetPath = (name, args) => {
+          if (compilation.mainTemplate.getAssetPath) /* Webpack >= 4.0 */ {
+            return compilation.mainTemplate.getAssetPath(name, args);
+          } else {
+            return compilation.mainTemplate.applyPluginsWaterfall('asset-path', name, args);
+          }
+        }
+
         // Replace [hash] placeholders in filename
-        const outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
+        const outputName = getAssetPath(outputOptions.filename, {
           hash: childCompilation.hash,
           chunk: entries[0]
         });

diff --git a/lib/favicons.js b/lib/favicons.js
@@ -9,7 +9,7 @@ module.exports = function (content) {
   const callback = this.async();
   const query = loaderUtils.parseQuery(this.query);
   const params = {
-    context: query.context || this.options.context,
+    context: query.context || (this.options && this.options.context) || this.rootContext,
     regExp: query.regExp,
     content
   };

diff --git a/package.json b/package.json
@@ -50,6 +50,6 @@
     "parse-author": "^2.0.0"
   },
   "peerDependencies": {
-    "webpack": "^1.13.0 || ^2.0.0 || ^3.0.0"
+    "webpack": "^1.13.0 || ^2.0.0 || ^3.0.0 || ^4.0.0"
   }
 }
diff --git a/test/index.js b/test/index.js
@@ -75,11 +75,11 @@ test('should generate a configured JSON file', async t => {
 });
 
 test('should work together with the html-webpack-plugin', async t => {
-  const stats = await webpack(baseWebpackConfig([
+  const stats = await webpack(baseWebpackConfig(
+    new HtmlWebpackPlugin(),
     new FaviconsWebpackPlugin({
-      logo: LOGO_PATH,
+      logo: LOGO,
     }),
-    new HtmlWebpackPlugin()
   ));
   const outputPath = stats.compilation.compiler.outputPath;
   const expected = path.resolve(FIXTURES, 'expected/generate-html');