Update for Webpack 4

jouni-kantola · Mar 21, 2018 · 05911da · 05911da
1 parent 4a7711b
commit 05911da
Show file tree

Hide file tree

Showing 9 changed files with 324 additions and 230 deletions.
diff --git a/src/chunk-manifest-webpack-plugin.js b/src/chunk-manifest-webpack-plugin.js
@@ -1,7 +1,7 @@
 /**
- * This dependency plugin is a fork of: 
+ * This dependency plugin is a fork of:
  * chunk-manifest-webpack-plugin (https://github.com/soundcloud/chunk-manifest-webpack-plugin)
- * 
+ *
  * inline-chunk-manifest-html-webpack-plugin already enables inlining webpack's chunk manifest,
  * and therefor has been extracted.
  */
@@ -22,15 +22,15 @@ class ChunkManifestPlugin {
     const manifestVariable = this.manifestVariable;
     let chunkFilename;
 
-    compiler.plugin("this-compilation", compilation => {
+    compiler.hooks.thisCompilation.tap("ChunkManifestPlugin", compilation => {
       const mainTemplate = compilation.mainTemplate;
-      mainTemplate.plugin("require-ensure", function(
+      mainTemplate.hooks.requireEnsure.tap("ChunkManifestPlugin", (
         source,
         chunk,
         hash
         /*, chunkIdVariableName */
-      ) {
-        chunkFilename = this.outputOptions.chunkFilename;
+      ) => {
+        chunkFilename = compilation.outputOptions.chunkFilename;
 
         if (chunkFilename) {
           const chunkManifest = [chunk].reduce(function registerChunk(
@@ -42,23 +42,28 @@ class ChunkManifestPlugin {
             if (c.hasRuntime()) {
               manifest[c.id] = undefined;
             } else {
-              const assetFilename = mainTemplate.applyPluginsWaterfall(
-                "asset-path",
-                chunkFilename,
-                {
-                  hash,
-                  chunk: c
-                }
-              );
+              const assetFilename = mainTemplate.getAssetPath(chunkFilename, {
+                hash: hash,
+                chunk: c
+              });
 
               manifest[c.id] = assetFilename;
             }
 
-            return c.chunks.reduce(registerChunk, manifest);
+            const cGroups = Array.from(c.groupsIterable);
+            const cGroupsChildren = cGroups.map(group => group.chunks);
+            const unsortedChunks = cGroupsChildren.reduce(
+              (chunksArray, childrens) => chunksArray.concat(childrens),
+              []
+            );
+
+            const chunks = Array.from(new Set(unsortedChunks));
+
+            return chunks.reduce(registerChunk, manifest);
           },
           {});
 
-          this.outputOptions.chunkFilename = "__CHUNK_MANIFEST__";
+          compilation.outputOptions.chunkFilename = "__CHUNK_MANIFEST__";
 
           compilation.assets[manifestFilename] = new RawSource(
             JSON.stringify(chunkManifest)
@@ -69,25 +74,23 @@ class ChunkManifestPlugin {
       });
     });
 
-    compiler.plugin("compilation", compilation => {
+    compiler.hooks.compilation.tap("ChunkManifestPlugin", compilation => {
       const mainTemplate = compilation.mainTemplate;
-      mainTemplate.plugin("require-ensure", function(
-        source,
-        chunk,
-        hash,
-        chunkIdVariableName
-      ) {
-        if (chunkFilename) {
-          this.outputOptions.chunkFilename = chunkFilename;
-        }
-
-        const updatedSource = source.replace(
-          /"__CHUNK_MANIFEST__"/,
-          `window["${manifestVariable}"][${chunkIdVariableName}]`
-        );
+      mainTemplate.hooks.requireEnsure.tap(
+        "ChunkManifestPlugin",
+        (source, chunk, hash, chunkIdVariableName) => {
+          if (chunkFilename) {
+            compilation.outputOptions.chunkFilename = chunkFilename;
+          }
+
+          const updatedSource = source.replace(
+            /"__CHUNK_MANIFEST__"/,
+            `window["${manifestVariable}"][${chunkIdVariableName}]`
+          );
 
-        return updatedSource;
-      });
+          return updatedSource;
+        }
+      );
     });
   }
 }

diff --git a/src/index.js b/src/index.js
@@ -51,52 +51,58 @@ class InlineChunkManifestHtmlWebpackPlugin {
     const chunkManifestVariable = this.chunkManifestVariable;
     const dropAsset = this.dropAsset;
 
-    compiler.plugin("emit", (compilation, callback) => {
-      if (dropAsset) {
-        delete compilation.assets[manifestFilename];
-      }
+    compiler.hooks.emit.tapAsync(
+      "InlineChunkManifestHtmlWebpackPlugin",
+      (compilation, callback) => {
+        if (dropAsset) {
+          delete compilation.assets[manifestFilename];
+        }
 
-      callback();
-    });
-
-    compiler.plugin("compilation", compilation => {
-      compilation.plugin(
-        "html-webpack-plugin-alter-asset-tags",
-        (htmlPluginData, callback) => {
-          const asset = compilation.assets[manifestFilename];
-
-          if (asset) {
-            const newTag = {
-              tagName: "script",
-              closeTag: true,
-              attributes: {
-                type: "text/javascript"
-              },
-              innerHTML: `window.${manifestVariable}=${asset.source()}`
-            };
-
-            htmlPluginData.head.unshift(newTag);
+        callback();
+      }
+    );
+
+    compiler.hooks.compilation.tap(
+      "InlineChunkManifestHtmlWebpackPlugin",
+      compilation => {
+        compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(
+          "InlineChunkManifestHtmlWebpackPlugin",
+          (htmlPluginData, callback) => {
+            const asset = compilation.assets[manifestFilename];
+
+            if (asset) {
+              const newTag = {
+                tagName: "script",
+                closeTag: true,
+                attributes: {
+                  type: "text/javascript"
+                },
+                innerHTML: `window.${manifestVariable}=${asset.source()}`
+              };
+
+              htmlPluginData.head.unshift(newTag);
+            }
+
+            callback(null, htmlPluginData);
           }
+        );
 
-          callback(null, htmlPluginData);
-        }
-      );
+        compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tapAsync(
+          "InlineChunkManifestHtmlWebpackPlugin",
+          (htmlPluginData, callback) => {
+            const asset = compilation.assets[manifestFilename];
 
-      compilation.plugin(
-        "html-webpack-plugin-before-html-generation",
-        (htmlPluginData, callback) => {
-          const asset = compilation.assets[manifestFilename];
+            if (asset) {
+              htmlPluginData.assets[
+                chunkManifestVariable
+              ] = `<script type="text/javascript">window.${manifestVariable}=${asset.source()}</script>`;
+            }
 
-          if (asset) {
-            htmlPluginData.assets[
-              chunkManifestVariable
-            ] = `<script type="text/javascript">window.${manifestVariable}=${asset.source()}</script>`;
+            callback(null, htmlPluginData);
           }
-
-          callback(null, htmlPluginData);
-        }
-      );
-    });
+        );
+      }
+    );
   }
 
   applyDependencyPlugins(compiler) {

diff --git a/test/plugin-apply-test.js b/test/plugin-apply-test.js
@@ -12,7 +12,16 @@ test("plugin and dependency plugins has apply", t => {
 test.cb("dependency plugins are applied", t => {
   t.plan(2);
 
-  const fakeCompiler = { plugin: () => {} };
+  const fakeCompiler = {
+    hooks: {
+      emit: {
+        tapAsync: (name, handler) => {}
+      },
+      compilation: {
+        tap: (name, handler) => {}
+      }
+    }
+  };
 
   const dependencyPlugin = {
     apply: compiler => {
@@ -35,7 +44,16 @@ test.cb("dependency plugins are applied", t => {
 test.cb("overridden manifest plugins applied", t => {
   t.plan(2);
 
-  const fakeCompiler = { plugin: () => {} };
+  const fakeCompiler = {
+    hooks: {
+      emit: {
+        tapAsync: (name, handler) => {}
+      },
+      compilation: {
+        tap: (name, handler) => {}
+      }
+    }
+  };
 
   const dependencyPlugin = {
     apply: compiler => {

diff --git a/test/plugin-create-asset-test.js b/test/plugin-create-asset-test.js
@@ -7,42 +7,54 @@ test.cb("create asset", t => {
   const manifestVariable = "manifest-variable";
   const chunkManifestVariable = "chunk-manifest-variable";
 
-  const compilationPluginEvent = (compilationEvent, alterAssets) => {
-    if (compilationEvent === "html-webpack-plugin-before-html-generation") {
-      const htmlPluginData = {
-        assets: {}
-      };
-
-      alterAssets(htmlPluginData, (_, result) => {
-        const asset = htmlPluginData.assets[chunkManifestVariable];
-
-        t.is(
-          asset,
-          `<script type="text/javascript">window.${manifestVariable}=${manifestFileContent}</script>`
-        );
-
-        t.end();
-      });
-    }
+  const compilationPluginEvent = (name, alterAssets) => {
+    const htmlPluginData = {
+      assets: {}
+    };
+
+    alterAssets(htmlPluginData, (_, result) => {
+      const asset = htmlPluginData.assets[chunkManifestVariable];
+
+      t.is(
+        asset,
+        `<script type="text/javascript">window.${manifestVariable}=${manifestFileContent}</script>`
+      );
+
+      t.end();
+    });
   };
 
-  const pluginEvent = (event, compile) => {
-    if (event === "compilation") {
-      const assets = {};
-      assets[manifestFilename] = {
-        source: () => manifestFileContent
-      };
+  const pluginEvent = (name, compile) => {
+    const assets = {};
+    assets[manifestFilename] = {
+      source: () => manifestFileContent
+    };
 
-      const compilation = {
-        plugin: compilationPluginEvent,
-        assets: assets
-      };
+    const compilation = {
+      hooks: {
+        htmlWebpackPluginAlterAssetTags: {
+          tapAsync: () => {}
+        },
+        htmlWebpackPluginBeforeHtmlGeneration: {
+          tapAsync: compilationPluginEvent
+        }
+      },
+      assets: assets
+    };
 
-      compile(compilation);
-    }
+    compile(compilation);
   };
 
-  const fakeCompiler = { plugin: pluginEvent };
+  const fakeCompiler = {
+    hooks: {
+      emit: {
+        tapAsync: (name, handler) => {}
+      },
+      compilation: {
+        tap: pluginEvent
+      }
+    }
+  };
 
   const plugin = new InlineChunkManifestHtmlWebpackPlugin({
     filename: manifestFilename,

diff --git a/test/plugin-drop-asset-test.js b/test/plugin-drop-asset-test.js
@@ -27,17 +27,22 @@ function isDropped(dropAsset, callback) {
     source: () => manifestFileContent
   };
 
-  const pluginEvent = (event, emit) => {
-    if (event === "emit") {
-      emit(compilation, () => {
-        const asset = compilation.assets[manifestFilename];
-        callback(asset);
-      });
+  const fakeCompiler = {
+    hooks: {
+      emit: {
+        tapAsync: (name, handler) => {
+          handler(compilation, () => {
+            const asset = compilation.assets[manifestFilename];
+            callback(asset);
+          });
+        }
+      },
+      compilation: {
+        tap: (name, handler) => {}
+      }
     }
   };
 
-  const fakeCompiler = { plugin: pluginEvent };
-
   const plugin = new InlineChunkManifestHtmlWebpackPlugin({
     filename: manifestFilename,
     manifestVariable: manifestVariable,