- [x] Upgrade to webpack 4.8.X

- [x] Utilize webpack 4 development and production modes - [x] Upgrade webpack dev server - [x] Webpack 4 compatible release of thread-loader - [x] Webpack 4 compatible release of HtmlWebpackPlugin - [x] Webpack 4 compatible release of SwPrecacheWebpackPlugin - [x] Webpack 4 compatible release of WebpackManifestPlugin - [x] Update README - [x] Update WebpackDevServerUtils - [x] Update InterpolateHtmlPlugin - [x] Update ModuleScopePlugin - [x] Update WatchMissingNodeModulesPlugin - [x] Move UglifyJS options to webpack 4 optimize - [x] Move InterpolateHtmlPlugin to make it tapable on HtmlWebpackPlugin - [x] vendor splitting via splitChunks.splitChunks (https://twitter.com/wSokra/status/969633336732905474) - [x] long term caching via splitChunks.runtimeChunk (https://twitter.com/wSokra/status/969679223278505985) - [x] Make sure process.env.NODE_ENV is proxied correctly to `react-error-overlay` - [x] Implicit webpack.NamedModulesPlugin in dev config as its default in webpack 4 - [x] Disable webpack performance hints as we have our own filesize reporter - [x] Replace ExtractTextPlugin with MiniCssExtractPlugin - [x] Switch to css whole file minification via OptimizeCSSAssetsPlugin rather than per module css minification to gain performance
facebook · gaearon · May 20, 2018 · Jan 24, 2018 · May 15, 2018 · e6fd0d13b662fc26bc809012a922c427afb0ab2a
commit e6fd0d13b662fc26bc809012a922c427afb0ab2a
diff --git a/package.json b/package.json
@@ -19,16 +19,16 @@
     "precommit": "lint-staged"
   },
   "devDependencies": {
-    "eslint": "4.15.0",
-    "execa": "^0.9.0",
-    "husky": "^0.13.2",
-    "lerna": "2.6.0",
-    "lerna-changelog": "^0.6.0",
+    "eslint": "4.19.1",
+    "execa": "^0.10.0",
+    "husky": "^0.14.3",
+    "lerna": "2.9.1",
+    "lerna-changelog": "^0.7.0",
     "lint-staged": "^7.0.5",
     "meow": "^4.0.0",
     "multimatch": "^2.1.0",
-    "prettier": "1.6.1",
-    "svg-term-cli": "^2.0.3",
+    "prettier": "1.12.1",
+    "svg-term-cli": "^2.1.1",
     "tempy": "^0.2.1"
   },
   "lint-staged": {

diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json
@@ -27,6 +27,6 @@
     "@babel/preset-react": "7.0.0-beta.46",
     "babel-plugin-macros": "2.2.1",
     "babel-plugin-transform-dynamic-import": "2.0.0",
-    "babel-plugin-transform-react-remove-prop-types": "0.4.12"
+    "babel-plugin-transform-react-remove-prop-types": "0.4.13"
   }
 }
diff --git a/packages/confusing-browser-globals/package.json b/packages/confusing-browser-globals/package.json
@@ -16,6 +16,6 @@
     "index.js"
   ],
   "devDependencies": {
-    "jest": "22.4.1"
+    "jest": "22.4.3"
   }
 }
diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json
@@ -16,7 +16,7 @@
     "eslint-plugin-flowtype": "^2.34.1",
     "eslint-plugin-import": "^2.6.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.7.0"
+    "eslint-plugin-react": "^7.8.2"
   },
   "dependencies": {
     "confusing-browser-globals": "^1.0.0"

diff --git a/packages/react-dev-utils/InterpolateHtmlPlugin.js b/packages/react-dev-utils/InterpolateHtmlPlugin.js
@@ -22,10 +22,10 @@ class InterpolateHtmlPlugin {
   }
 
   apply(compiler) {
-    compiler.plugin('compilation', compilation => {
-      compilation.plugin(
-        'html-webpack-plugin-before-html-processing',
-        (data, callback) => {
+    compiler.hooks.compilation.tap('InterpolateHtmlPlugin', compilation => {
+      compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap(
+        'InterpolateHtmlPlugin',
+        data => {
           // Run HTML through a series of user-specified string replacements.
           Object.keys(this.replacements).forEach(key => {
             const value = this.replacements[key];
@@ -34,7 +34,6 @@ class InterpolateHtmlPlugin {
               value
             );
           });
-          callback(null, data);
         }
       );
     });

diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js
@@ -18,70 +18,72 @@ class ModuleScopePlugin {
 
   apply(resolver) {
     const { appSrcs } = this;
-    resolver.plugin('file', (request, callback) => {
-      // Unknown issuer, probably webpack internals
-      if (!request.context.issuer) {
-        return callback();
-      }
-      if (
-        // If this resolves to a node_module, we don't care what happens next
-        request.descriptionFileRoot.indexOf('/node_modules/') !== -1 ||
-        request.descriptionFileRoot.indexOf('\\node_modules\\') !== -1 ||
-        // Make sure this request was manual
-        !request.__innerRequest_request
-      ) {
-        return callback();
-      }
-      // Resolve the issuer from our appSrc and make sure it's one of our files
-      // Maybe an indexOf === 0 would be better?
-      if (
-        appSrcs.every(appSrc => {
-          const relative = path.relative(appSrc, request.context.issuer);
-          // If it's not in one of our app src or a subdirectory, not our request!
-          return relative.startsWith('../') || relative.startsWith('..\\');
-        })
-      ) {
-        return callback();
-      }
-      const requestFullPath = path.resolve(
-        path.dirname(request.context.issuer),
-        request.__innerRequest_request
-      );
-      if (this.allowedFiles.has(requestFullPath)) {
-        return callback();
-      }
-      // Find path from src to the requested file
-      // Error if in a parent directory of all given appSrcs
-      if (
-        appSrcs.every(appSrc => {
-          const requestRelative = path.relative(appSrc, requestFullPath);
-          return (
-            requestRelative.startsWith('../') ||
-            requestRelative.startsWith('..\\')
-          );
-        })
-      ) {
-        callback(
-          new Error(
-            `You attempted to import ${chalk.cyan(
-              request.__innerRequest_request
-            )} which falls outside of the project ${chalk.cyan(
-              'src/'
-            )} directory. ` +
-              `Relative imports outside of ${chalk.cyan(
-                'src/'
-              )} are not supported. ` +
-              `You can either move it inside ${chalk.cyan(
-                'src/'
-              )}, or add a symlink to it from project's ${chalk.cyan(
-                'node_modules/'
-              )}.`
-          ),
-          request
+    resolver.hooks.file.tapAsync(
+      'ModuleScopePlugin',
+      (request, contextResolver, callback) => {
+        // Unknown issuer, probably webpack internals
+        if (!request.context.issuer) {
+          return callback();
+        }
+        if (
+          // If this resolves to a node_module, we don't care what happens next
+          request.descriptionFileRoot.indexOf('/node_modules/') !== -1 ||
+          request.descriptionFileRoot.indexOf('\\node_modules\\') !== -1 ||
+          // Make sure this request was manual
+          !request.__innerRequest_request
+        ) {
+          return callback();
+        }
+        // Resolve the issuer from our appSrc and make sure it's one of our files
+        // Maybe an indexOf === 0 would be better?
+        if (
+          appSrcs.every(appSrc => {
+            const relative = path.relative(appSrc, request.context.issuer);
+            // If it's not in one of our app src or a subdirectory, not our request!
+            return relative.startsWith('../') || relative.startsWith('..\\');
+          })
+        ) {
+          return callback();
+        }
+        const requestFullPath = path.resolve(
+          path.dirname(request.context.issuer),
+          request.__innerRequest_request
         );
-      } else {
-        callback();
-      }
+        if (this.allowedFiles.has(requestFullPath)) {
+          return callback();
+        }
+        // Find path from src to the requested file
+        // Error if in a parent directory of all given appSrcs
+        if (
+          appSrcs.every(appSrc => {
+            const requestRelative = path.relative(appSrc, requestFullPath);
+            return (
+              requestRelative.startsWith('../') ||
+              requestRelative.startsWith('..\\')
+            );
+          })
+        ) {
+          callback(
+            new Error(
+              `You attempted to import ${chalk.cyan(
+                request.__innerRequest_request
+              )} which falls outside of the project ${chalk.cyan(
+                'src/'
+              )} directory. ` +
+                `Relative imports outside of ${chalk.cyan(
+                  'src/'
+                )} are not supported. ` +
+                `You can either move it inside ${chalk.cyan(
+                  'src/'
+                )}, or add a symlink to it from project's ${chalk.cyan(
+                  'node_modules/'
+                )}.`
+            ),
+            request
+          );
+        } else {
+          callback();
+        }
     });
   }
 }

diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
@@ -38,18 +38,18 @@ module.exports = {
   },
   // ...
   plugins: [
+    // Generates an `index.html` file with the <script> injected.
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: path.resolve('public/index.html'),
+    }),
     // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     new InterpolateHtmlPlugin({
       PUBLIC_URL: publicUrl
       // You can pass any key-value pairs, this was just an example.
       // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html.
     }),
-    // Generates an `index.html` file with the <script> injected.
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: path.resolve('public/index.html'),
-    }),
     // ...
   ],
   // ...
@@ -198,11 +198,11 @@ var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 
 var compiler = webpack(config);
 
-compiler.plugin('invalid', function() {
+compiler.hooks.invalid.tap('invalid', function() {
   console.log('Compiling...');
 });
 
-compiler.plugin('done', function(stats) {
+compiler.hooks.done.tap('done', function(stats) {
   var rawMessages = stats.toJson({}, true);
   var messages = formatWebpackMessages(rawMessages);
   if (!messages.errors.length && !messages.warnings.length) {

diff --git a/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js b/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js
@@ -17,17 +17,15 @@ class WatchMissingNodeModulesPlugin {
   }
 
   apply(compiler) {
-    compiler.plugin('emit', (compilation, callback) => {
-      var missingDeps = compilation.missingDependencies;
+    compiler.hooks.emit.tap('WatchMissingNodeModulesPlugin', compilation => {
+      var missingDeps = Array.from(compilation.missingDependencies);
       var nodeModulesPath = this.nodeModulesPath;
 
       // If any missing files are expected to appear in node_modules...
-      if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
+      if (missingDeps.some(file => file.includes(nodeModulesPath))) {
         // ...tell webpack to watch node_modules recursively until they appear.
-        compilation.contextDependencies.push(nodeModulesPath);
+        compilation.contextDependencies.add(nodeModulesPath);
       }
-
-      callback();
     });
   }
 }

diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js
@@ -131,7 +131,7 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
   // recompiling a bundle. WebpackDevServer takes care to pause serving the
   // bundle, so if you refresh, it'll wait instead of serving the old one.
   // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
-  compiler.plugin('invalid', () => {
+  compiler.hooks.invalid.tap('invalid', () => {
     if (isInteractive) {
       clearConsole();
     }
@@ -142,7 +142,7 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
 
   // "done" event fires when Webpack has finished recompiling the bundle.
   // Whether or not you have warnings or errors, you will get this event.
-  compiler.plugin('done', stats => {
+  compiler.hooks.done.tap('done', stats => {
     if (isInteractive) {
       clearConsole();
     }

diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
@@ -40,29 +40,29 @@
   "dependencies": {
     "@babel/code-frame": "7.0.0-beta.46",
     "address": "1.0.3",
-    "browserslist": "2.11.3",
-    "chalk": "2.3.0",
-    "cross-spawn": "5.1.0",
+    "browserslist": "3.2.6",
+    "chalk": "2.4.1",
+    "cross-spawn": "6.0.5",
     "detect-port-alt": "1.1.6",
     "escape-string-regexp": "1.0.5",
-    "filesize": "3.5.11",
+    "filesize": "3.6.1",
     "find-pkg": "1.0.0",
     "global-modules": "1.0.0",
-    "globby": "7.1.1",
+    "globby": "8.0.1",
     "gzip-size": "4.1.0",
-    "inquirer": "5.0.0",
+    "inquirer": "5.1.0",
     "is-root": "1.0.0",
-    "opn": "5.2.0",
+    "opn": "5.3.0",
     "pkg-up": "2.0.0",
     "react-error-overlay": "^4.0.0",
-    "recursive-readdir": "2.2.1",
+    "recursive-readdir": "2.2.2",
     "shell-quote": "1.6.1",
     "sockjs-client": "1.1.4",
     "strip-ansi": "4.0.0",
     "text-table": "0.2.0"
   },
   "devDependencies": {
-    "jest": "22.4.1"
+    "jest": "22.4.3"
   },
   "scripts": {
     "test": "jest"

diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json
@@ -36,31 +36,32 @@
     "anser": "1.4.6",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^8.2.2",
-    "babel-jest": "^22.4.1",
+    "babel-jest": "^22.4.3",
     "babel-loader": "^8.0.0-beta.0",
     "babel-preset-react-app": "^3.1.1",
-    "chalk": "^2.1.0",
-    "chokidar": "^2.0.0",
-    "cross-env": "5.1.3",
-    "eslint": "4.15.0",
+    "chalk": "^2.3.2",
+    "chokidar": "^2.0.2",
+    "cross-env": "5.1.4",
+    "eslint": "4.19.1",
     "eslint-config-react-app": "^2.1.0",
-    "eslint-plugin-flowtype": "2.41.0",
-    "eslint-plugin-import": "2.8.0",
+    "eslint-plugin-flowtype": "2.46.1",
+    "eslint-plugin-import": "2.9.0",
     "eslint-plugin-jsx-a11y": "6.0.3",
-    "eslint-plugin-react": "7.7.0",
+    "eslint-plugin-react": "7.8.2",
     "flow-bin": "^0.63.1",
     "html-entities": "1.2.1",
-    "jest": "22.4.1",
-    "jest-fetch-mock": "1.2.1",
+    "jest": "22.4.3",
+    "jest-fetch-mock": "1.5.0",
     "object-assign": "4.1.1",
     "promise": "8.0.1",
     "raw-loader": "^0.5.1",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "rimraf": "^2.6.1",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "rimraf": "^2.6.2",
     "settle-promise": "1.0.0",
     "source-map": "0.5.6",
-    "webpack": "^3.6.0"
+    "uglifyjs-webpack-plugin": "1.2.5",
+    "webpack": "^4.8.1"
   },
   "jest": {
     "setupFiles": [