Revert "Upgrade to webpack@4" (fusionjs#279)

This reverts commit 615c472.
akre54 · Mar 16, 2018 · 17fcaa2 · 17fcaa2
1 parent 6998bca
commit 17fcaa2
Show file tree

Hide file tree

Showing 16 changed files with 980 additions and 666 deletions.
diff --git a/build/chunk-module-manifest-plugin.js b/build/chunk-module-manifest-plugin.js
@@ -11,28 +11,26 @@ class ChunkModuleManifestPlugin {
     this.opts = opts;
   }
   apply(compiler) {
-    compiler.hooks.invalid.tap('ChunkModuleManifestPlugin', () => {
+    compiler.plugin('invalid', () => {
       this.opts.onInvalidate();
     });
 
-    compiler.hooks.compilation.tap('ChunkModuleManifestPlugin', compilation => {
-      compilation.hooks.afterOptimizeChunkAssets.tap(
-        'ChunkModuleManifestPlugin',
-        chunks => {
-          const chunkIdsByFile = new Map();
-          chunks.forEach(c => {
-            const chunkId = c.id;
-            const files = Array.from(c.modulesIterable, m => m.resource);
-            files.forEach(path => {
-              if (!chunkIdsByFile.has(path)) {
-                chunkIdsByFile.set(path, new Set());
-              }
-              chunkIdsByFile.get(path).add(chunkId);
-            });
+    compiler.plugin('compilation', compilation => {
+      compilation.plugin('after-optimize-chunk-assets', chunks => {
+        const chunkIdsByFile = new Map();
+        chunks.forEach(c => {
+          const chunkId = c.id;
+          const files = c.mapModules(m => m.resource);
+
+          files.forEach(path => {
+            if (!chunkIdsByFile.has(path)) {
+              chunkIdsByFile.set(path, new Set());
+            }
+            chunkIdsByFile.get(path).add(chunkId);
           });
-          this.opts.onChunkIndex(chunkIdsByFile);
-        }
-      );
+        });
+        this.opts.onChunkIndex(chunkIdsByFile);
+      });
     });
   }
 }

diff --git a/build/chunk-preload-plugin.js b/build/chunk-preload-plugin.js
@@ -4,19 +4,15 @@
  * This is meant for the client
  */
 
-const Template = require('webpack/lib/Template');
-
 class ChunkPreloadPlugin {
   apply(compiler) {
-    compiler.hooks.compilation.tap('ChunkPreloadPlugin', function(compilation) {
-      compilation.mainTemplate.hooks.localVars.tap(
-        'ChunkPreloadPlugin',
-        function(source) {
-          var buf = [source];
-          buf.push('');
-          buf.push('// chunk preloading');
-          buf.push(
-            `
+    compiler.plugin('compilation', function(compilation) {
+      compilation.mainTemplate.plugin('local-vars', function(source) {
+        var buf = [source];
+        buf.push('');
+        buf.push('// chunk preloading');
+        buf.push(
+          `
   if (window.__PRELOADED_CHUNKS__) {
     window.__PRELOADED_CHUNKS__.forEach(function(chunkId) {
       var result;
@@ -42,10 +38,9 @@ class ChunkPreloadPlugin {
     window.__UNHANDLED_ERRORS__.forEach(rejectChunkPreload);
   }
         `
-          );
-          return Template.asString(buf);
-        }
-      );
+        );
+        return this.asString(buf);
+      });
     });
   }
 }

diff --git a/build/client-chunk-bundle-url-map-plugin.js b/build/client-chunk-bundle-url-map-plugin.js
@@ -11,36 +11,30 @@ class ClientChunkBundleUrlMapPlugin {
   apply(compiler) {
     const {expectedGroupIds, groupId} = this;
 
-    compiler.hooks.invalid.tap('ClientChunkBundleUrlMapPlugin', () => {
+    compiler.plugin('invalid', () => {
       clientChunkBundleUrlMap.invalidate();
     });
 
-    compiler.hooks.compilation.tap(
-      'ClientChunkBundleUrlMapPlugin',
-      compilation => {
-        compilation.hooks.afterOptimizeChunkAssets.tap(
-          'ClientChunkBundleUrlMapPlugin',
-          chunks => {
-            const {manifest = new Map(), groups = new Set(), resolve = null} =
-              clientChunkBundleUrlMap.value || {};
-            groups.add(groupId);
-            chunks.forEach(chunk => {
-              const chunkGroups = manifest.get(chunk.id) || new Map();
-              const [filename] = chunk.files;
-              chunkGroups.set(groupId, filename);
-              manifest.set(chunk.id, chunkGroups);
-            });
-            const finalValue = {manifest, groups, resolve};
-            clientChunkBundleUrlMap.value = finalValue;
+    compiler.plugin('compilation', compilation => {
+      compilation.plugin('after-optimize-chunk-assets', chunks => {
+        const {manifest = new Map(), groups = new Set(), resolve = null} =
+          clientChunkBundleUrlMap.value || {};
+        groups.add(groupId);
+        chunks.forEach(chunk => {
+          const chunkGroups = manifest.get(chunk.id) || new Map();
+          const [filename] = chunk.files;
+          chunkGroups.set(groupId, filename);
+          manifest.set(chunk.id, chunkGroups);
+        });
+        const finalValue = {manifest, groups, resolve};
+        clientChunkBundleUrlMap.value = finalValue;
 
-            // wait until all assets are built before letting the loader load
-            if (groups.size === expectedGroupIds.length) {
-              clientChunkBundleUrlMap.set(finalValue);
-            }
-          }
-        );
-      }
-    );
+        // wait until all assets are built before letting the loader load
+        if (groups.size === expectedGroupIds.length) {
+          clientChunkBundleUrlMap.set(finalValue);
+        }
+      });
+    });
   }
 }
 

diff --git a/build/client-source-map-plugin.js b/build/client-source-map-plugin.js
@@ -15,38 +15,35 @@ const clientSourceMap = require('./client-source-map');
  */
 class ClientSourceMapPlugin {
   apply(compiler) {
-    compiler.hooks.invalid.tap('ClientSourceMapPlugin', () => {
+    compiler.plugin('invalid', () => {
       clientSourceMap.invalidate();
     });
-    compiler.hooks.emit.tapAsync(
-      'ClientSourceMapPlugin',
-      (compilation, done) => {
-        const sourcemaps = new Map();
-        compilation.chunks.forEach(chunk => {
-          const len = chunk.files.length;
-          if (len % 2 !== 0) {
-            throw new Error(
-              'Chunk had odd number of files, probably due missing sourcemaps'
+    compiler.plugin('emit', (compilation, done) => {
+      const sourcemaps = new Map();
+      compilation.chunks.forEach(chunk => {
+        const len = chunk.files.length;
+        if (len % 2 !== 0) {
+          throw new Error(
+            'Chunk had odd number of files, probably due missing sourcemaps'
+          );
+        }
+        const files = new Map();
+        const canonicalSize = len / 2;
+        chunk.files.forEach((filename, index) => {
+          const canonicalIndex = index % canonicalSize;
+          if (!files.has(canonicalIndex)) {
+            files.set(canonicalIndex, filename);
+          } else {
+            sourcemaps.set(
+              files.get(canonicalIndex),
+              JSON.parse(compilation.assets[filename].source())
             );
           }
-          const files = new Map();
-          const canonicalSize = len / 2;
-          chunk.files.forEach((filename, index) => {
-            const canonicalIndex = index % canonicalSize;
-            if (!files.has(canonicalIndex)) {
-              files.set(canonicalIndex, filename);
-            } else {
-              sourcemaps.set(
-                files.get(canonicalIndex),
-                JSON.parse(compilation.assets[filename].source())
-              );
-            }
-          });
         });
-        clientSourceMap.set(sourcemaps);
-        done();
-      }
-    );
+      });
+      clientSourceMap.set(sourcemaps);
+      done();
+    });
   }
 }
 

diff --git a/build/compiler.js b/build/compiler.js
@@ -5,6 +5,8 @@ const path = require('path');
 const webpack = require('webpack');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 
+const progress = new ProgressBarPlugin();
+const WebpackChunkHash = require('webpack-chunk-hash');
 const webpackDevMiddleware = require('../lib/simple-webpack-dev-middleware');
 const ChunkManifestPlugin = require('./external-chunk-manifest-plugin.js');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
@@ -145,7 +147,6 @@ function getConfig({target, env, dir, watch, cover}) {
         entry,
       ].filter(Boolean),
     },
-    mode: env === 'production' ? 'production' : 'development',
     // TODO(#47): Do we need to do something different here for production?
     stats: 'minimal',
     /**
@@ -355,7 +356,7 @@ function getConfig({target, env, dir, watch, cover}) {
       },
     },
     plugins: [
-      new ProgressBarPlugin(),
+      progress,
       // TODO(#9): relying only on timestamp will invalidate service worker after every build
       // optimize by importing all chunk names to sw and then remove timestamp in non-dev.
       target === 'webworker' && new ServiceWorkerTimestampPlugin(),
@@ -388,13 +389,25 @@ function getConfig({target, env, dir, watch, cover}) {
       env === 'development' &&
         watch &&
         new webpack.HotModuleReplacementPlugin(),
+      target === 'web' &&
+        env !== 'test' &&
+        // Bundles all node_modules code into vendor chunk
+        // See https://webpack.js.org/guides/code-splitting-libraries/#implicit-common-vendor-chunk
+        new webpack.optimize.CommonsChunkPlugin({
+          name: 'vendor',
+          minChunks: module => {
+            return module.context && module.context.includes('node_modules');
+          },
+        }),
       // The next two plugins are required for deterministic file hashes
       // See https://github.com/webpack/webpack/issues/1315 and
       // https://webpack.js.org/guides/caching/#generating-unique-hashes-for-each-file
       // Use deterministic, internal webpack identifiers based on hashed contents
       env === 'production' && target === 'web'
         ? new webpack.HashedModuleIdsPlugin()
         : new webpack.NamedModulesPlugin(),
+      // Adds md5 hashing of webpack chunks
+      env === 'production' && target === 'web' && new WebpackChunkHash(),
       // This is necessary to tell webpack not to inline code referencing
       // assets. See https://github.com/webpack/webpack/issues/1315
       env === 'production' &&
@@ -455,36 +468,6 @@ function getConfig({target, env, dir, watch, cover}) {
           sourceMap: true,
         }),
     ].filter(Boolean),
-    optimization: {
-      splitChunks: target === 'web' && {
-        // See https://webpack.js.org/guides/code-splitting/
-        // See https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
-        // See https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-        // Bundles all node_modules code into vendor chunk
-        chunks: 'async',
-        minSize: 30000,
-        minChunks: 1,
-        maxAsyncRequests: 5,
-        maxInitialRequests: 3,
-        name: true,
-        cacheGroups: {
-          default: {
-            minChunks: 2,
-            reuseExistingChunk: true,
-          },
-          vendor: {
-            test: /[\\/]node_modules[\\/]/,
-            name: 'vendor',
-            filename:
-              env === 'production' && target === 'web'
-                ? `${name}-[name]-[chunkhash].js`
-                : `${name}-[name].js`,
-            chunks: 'initial',
-            enforce: true,
-          },
-        },
-      },
-    },
   };
 }
 
@@ -564,7 +547,7 @@ function Compiler({
 
   const statsLogger = getStatsLogger({dir, logger, envs});
 
-  this.on = (type, callback) => compiler.hooks[type].tap('compiler', callback);
+  this.on = (type, callback) => compiler.plugin(type, callback);
   this.start = cb => {
     cb = cb || function noop() {};
     // Handler may be called multiple times by `watch`
@@ -589,7 +572,6 @@ function Compiler({
       };
     }
   };
-
   this.getMiddleware = () => {
     const dev = webpackDevMiddleware(compiler, {
       filter: c => c.name === 'client' || c.name === 'client-evergreen',

diff --git a/build/external-chunk-manifest-plugin.js b/build/external-chunk-manifest-plugin.js
@@ -21,28 +21,27 @@ class ChunkManifestPlugin {
     const manifestVariable = this.manifestVariable;
     let oldChunkFilename;
 
-    compiler.hooks.thisCompilation.tap('ChunkManifestPlugin', compilation => {
-      compilation.mainTemplate.hooks.requireEnsure.tap(
-        'ChunkManifestPlugin',
-        function(_) {
-          oldChunkFilename = this.outputOptions.chunkFilename;
-          this.outputOptions.chunkFilename = '__CHUNK_MANIFEST__';
-          return _;
-        }
-      );
+    compiler.plugin('this-compilation', compilation => {
+      compilation.mainTemplate.plugin('require-ensure', function(_) {
+        oldChunkFilename = this.outputOptions.chunkFilename;
+        this.outputOptions.chunkFilename = '__CHUNK_MANIFEST__';
+        return _;
+      });
     });
 
-    compiler.hooks.compilation.tap('ChunkManifestPlugin', compilation => {
-      compilation.mainTemplate.hooks.requireEnsure.tap(
-        'ChunkManifestPlugin',
-        function(_, chunk, hash, chunkIdVar) {
-          this.outputOptions.chunkFilename = oldChunkFilename;
-          return _.replace(
-            '"__CHUNK_MANIFEST__"',
-            `window["${manifestVariable}"][${chunkIdVar}]`
-          );
-        }
-      );
+    compiler.plugin('compilation', compilation => {
+      compilation.mainTemplate.plugin('require-ensure', function(
+        _,
+        chunk,
+        hash,
+        chunkIdVar
+      ) {
+        this.outputOptions.chunkFilename = oldChunkFilename;
+        return _.replace(
+          '"__CHUNK_MANIFEST__"',
+          `window["${manifestVariable}"][${chunkIdVar}]`
+        );
+      });
     });
   }
 }