Make work using webpack ID

Author: joshduck

.babelrc

@@ -1,6 +1,6 @@
 {
  "presets": ["es2016", "flow"],
- "plugins": ["syntax-dynamic-import", ["import-inspector", {
+ "plugins": ["syntax-dynamic-import", ["babel-plugin-import-inspector", {
  "serverSideRequirePath": true,
  "webpackRequireWeakId": true
  }]]

src/a.js src/components/a.jssrc/a.js renamed to src/components/a.js

@@ -0,0 +1,4 @@
+export default function() {
+ console.log("I am C, I will dynamically require A");
+ import("./a").then(({ default: a }) => a());
+}

src/b.js src/components/b.jssrc/b.js renamed to src/components/b.js

@@ -1,3 +1,3 @@
 export default function() {
- console.log('I am C');
+ console.log("I am D");
 }

src/components/c.js

@@ -1,27 +1,33 @@
 // @flow
 import { inspect } from "import-inspector";
 import path from "path";
+import process from "process";
+import ManifestInspector from "../tools/manifest-inspector";
 
-const stopInspecting = inspect(metadata => {
- console.log("Imported", metadata.serverSideRequirePath);
-});
+const manifest = new ManifestInspector("build/manifest.json");
 
-import("./a").then(({ default: a }) => {
- a();
-});
+// Hard require on component
+import a from "./components/a";
+a();
 
-import("./b").then(({ default: b }) => {
- b();
+// Look up bundle for a module without importing it
+const bundle = manifest.getBundleForWebpackId(
+ require.resolveWeak("./components/b")
+);
+console.log(`Weak resolve for ./components/b, provided by ${bundle}`);
+
+// Look up bundles for dynamic imports
+inspect(data => {
+ const bundle = manifest.getBundleForWebpackId(data.webpackRequireWeakId());
+ console.log(
+ `Dynamic require for ${data.importedModulePath}, provided by ${bundle}.`
+ );
 });
 
-import("./path/d").then(({ default: b }) => {
+import("./components/b").then(({ default: b }) => {
  b();
 });
 
-import c from "./c";
-c();
-
-import d from "./path/d";
-d();
-
-setTimeout(stopInspecting);
+import("./components/c").then(({ default: c }) => {
+ c();
+});

src/c.js src/components/d.jssrc/c.js renamed to src/components/d.js

@@ -0,0 +1,20 @@
+import fs from "fs";
+
+export default class ManifestInspector {
+ constructor(path) {
+ const manifest = JSON.parse(fs.readFileSync(path));
+ this.map = [];
+ Object.keys(manifest).forEach(bundle => {
+ manifest[bundle].map(module => {
+ this.map[module.webpackId] = {
+ bundle,
+ name: module.name
+ };
+ });
+ });
+ }
+
+ getBundleForWebpackId(webpackId) {
+ return this.map[webpackId].bundle;
+ }
+}

src/index.js

@@ -11,13 +11,16 @@ ManifestPlugin.prototype.apply = function(compiler) {
  compilation.chunks.forEach(chunk => {
  if (chunk.modules && chunk.files.length) {
  const file = chunk.files[0];
+
  manifest[file] = chunk.modules
  .filter(module => module.libIdent)
  .map(module => ({
  name: module.libIdent({
  context: this.opts.context || compiler.options.context
  }),
- index: module.index
+ index: module.index,
+ index2: module.index2,
+ webpackId: module.id // Corresponds to require.resolveWeak / webpackRequireWeakId
  }));
  }
  });