Webpack5 Support

[ryan-roemer]

Support webpack 5 and aggregate all other tickets here.

PR

#157

Tasks

• New needed stats field for docs and plugin: stats: { source: true }
• Need to handle and filter out new module field on stats object orphan: true
• Test differences in development vs production stats object for things like webpack/runtime/define property getters
• Categorically ignore webpack/buildin/global.js helper in results.
• Normalize asset fields across webpack versions.
• Refactor tree-shaking fixture which is legitimately be different in v4+prod vs dev now that webpack5 correctly tree shakes.
• Get CI passing on windows. Currently broken on Windows for loaders scenario. See: https://github.com/FormidableLabs/inspectpack/runs/1725462630?check_suite_focus=true
• Normalize moment.js synthetic module fields. (moment/locale sync /es/ vs moment/locale|/es/). Looks to be test-only.
  • Currently disabled. Search on TODO(MOMENT) to reenable.
• Test Fixture: webpack5 Test Fixture: webpack5 #140

[ryan-roemer]

Notes: WIP diff to add codeGenerated field to internal inferred modules:

diff --git a/src/lib/actions/base.ts b/src/lib/actions/base.ts
index c93e8ab..5cf2684 100644
--- a/src/lib/actions/base.ts
+++ b/src/lib/actions/base.ts
@@ -12,11 +12,13 @@ import {
   IWebpackStatsModules,
   IWebpackStatsModuleSource,
   IWebpackStatsModuleOrphan,
+  IWebpackStatsModuleCodeGenerated,
   IWebpackStatsModuleSynthetic,
   RWebpackStats,
   RWebpackStatsModuleModules,
   RWebpackStatsModuleSource,
   RWebpackStatsModuleOrphan,
+  RWebpackStatsModuleCodeGenerated,
   RWebpackStatsModuleSynthetic,
 } from "../interfaces/webpack-stats";
 import { toPosixPath } from "../util/files";
@@ -206,6 +208,8 @@ export abstract class Action {
 
           // Fields
           let isSynthetic = false;
+          let isOrphan = false;
+          let codeGenerated = false;
           let source = null;
           let identifier;
           let name;
@@ -219,12 +223,20 @@ export abstract class Action {
             return list.concat(this.getSourceMods(modsMod.modules, chunks));
 
           } else if (isRight(RWebpackStatsModuleSource.decode(mod))) {
-            // webpack5+: Check if an orphan and just skip entirely.
+            // webpack5+: Check extra fields.
             if (
               isRight(RWebpackStatsModuleOrphan.decode(mod)) &&
               (mod as IWebpackStatsModuleOrphan).orphan
             ) {
-              return list;
+              isOrphan = true;
+              return list; // TODO: SKIP PER OLD BEHAVIOR ???
+            }
+
+            if (
+              isRight(RWebpackStatsModuleCodeGenerated.decode(mod)) &&
+              (mod as IWebpackStatsModuleCodeGenerated).codeGenerated
+            ) {
+              codeGenerated = true;
             }
 
             // Base case -- a normal source code module that is **not** an orphan.
@@ -267,6 +279,8 @@ export abstract class Action {
             identifier,
             isNodeModules,
             isSynthetic,
+            isOrphan,
+            codeGenerated,
             size,
             source,
           }]);
diff --git a/src/lib/interfaces/modules.ts b/src/lib/interfaces/modules.ts
index 6774c94..4841dc3 100644
--- a/src/lib/interfaces/modules.ts
+++ b/src/lib/interfaces/modules.ts
@@ -12,6 +12,12 @@ export interface IModule extends IWebpackStatsModuleBase {
   // Is a vendor module / is part of a `node_modules` path.
   isSynthetic: boolean;
 
+  // Is orphaned module (either ignored in bundle, or tree-shaken / rewritten into bundle)
+  isOrphan: boolean;
+
+  // Webpack generated this new field on it's own (usually for tree-shaking).
+  codeGenerated: boolean;
+
   // We **change** `source` to allow `null` for synthetic modules.
   source: string | null;
 }
diff --git a/src/lib/interfaces/webpack-stats.ts b/src/lib/interfaces/webpack-stats.ts
index f368fa4..99dd444 100644
--- a/src/lib/interfaces/webpack-stats.ts
+++ b/src/lib/interfaces/webpack-stats.ts
@@ -85,7 +85,7 @@ export type IWebpackStatsModuleSource = t.TypeOf<typeof RWebpackStatsModuleSourc
 // ----------------------------------------------------------------------------
 // Module: Orphaned code **source**
 //
-// Introduced in webpack5 as a stat field, ignore these as not in any chunk.
+// Introduced in webpack5.
 // See: https://webpack.js.org/configuration/stats/#statsorphanmodules
 // ----------------------------------------------------------------------------
 export const RWebpackStatsModuleOrphan = t.intersection([
@@ -97,6 +97,20 @@ export const RWebpackStatsModuleOrphan = t.intersection([
 
 export type IWebpackStatsModuleOrphan = t.TypeOf<typeof RWebpackStatsModuleOrphan>;
 
+// ----------------------------------------------------------------------------
+// Module: webpack generated/mutated code
+//
+// Introduced in webpack5.
+// ----------------------------------------------------------------------------
+export const RWebpackStatsModuleCodeGenerated = t.intersection([
+  RWebpackStatsModuleSource,
+  t.type({
+    codeGenerated: t.boolean,
+  }),
+]);
+
+export type IWebpackStatsModuleCodeGenerated = t.TypeOf<typeof RWebpackStatsModuleCodeGenerated>;
+
 // ----------------------------------------------------------------------------
 // Module: Single "synthetic" module
 //

[ryan-roemer]

Update: Working on tree-shaking test failures

• Moment scenario is still disabled.
• Have 7 test failures in tree-shaking from webpack4+ actually doing tree-shaking which means that production has two less modules (foo/green.js) that are legitimately DCE'd vs. the development bundle which still contains them.

[ryan-roemer]

Tree-shaking done. Just moment scenario left which is (I think) just a difference in the webpack codegen name and otherwise identical.