- [x] Upgrade to webpack 4.1.0

- [x] Use new webpack 4 development and production modes - [x] Upgrade webpack dev server - [x] webpack 4 compatible release of thread-loader - [x] Upgrade to webpack 4 compatible release of HtmlWebpackPlugin - [x] Beta release of ExtractTextPlugin compatible plugin - [x] Pre-release of SwPrecacheWebpackPlugin compatible plugin - [x] Pre-release of WebpackManifestPLugin compatible plugin - [x] allChunks on ExtractTextPlugin fixes #3086 #2415 prior discussion #408 more details of this behavior webpack/webpack#673 - [x] Update README - [x] Update WebpackDevServerUtils - [x] Update InterpolateHtmlPlugin - [x] Update ModuleScopePlugin - [x] Update WatchMissingNodeModulesPlugin - [x] Move UglifyJS options to webpack 4 optimize - [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`
facebook · Mar 6, 2018 · 20e31b0 · 20e31b0
1 parent 65e0621
commit 20e31b0
Show file tree

Hide file tree

Showing 17 changed files with 264 additions and 214 deletions.
diff --git a/package.json b/package.json
@@ -16,19 +16,20 @@
     "screencast:error": "svg-term --cast jyu19xGl88FQ3poMY8Hbmfw8y --out screencast-error.svg --window --at 12000 --no-cursor",
     "test": "cd packages/react-scripts && node bin/react-scripts.js test --env=jsdom",
     "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'",
-    "precommit": "lint-staged"
+    "precommit": "lint-staged",
+    "webpack-defaults": "webpack-defaults"
   },
   "devDependencies": {
-    "eslint": "4.15.0",
+    "eslint": "4.18.2",
     "execa": "^0.9.0",
-    "husky": "^0.13.2",
-    "lerna": "2.6.0",
-    "lerna-changelog": "^0.6.0",
-    "lint-staged": "^3.3.1",
+    "husky": "^0.14.3",
+    "lerna": "2.9.0",
+    "lerna-changelog": "^0.7.0",
+    "lint-staged": "^7.0.0",
     "meow": "^4.0.0",
     "multimatch": "^2.1.0",
-    "prettier": "1.6.1",
-    "svg-term-cli": "^2.0.3",
+    "prettier": "1.11.1",
+    "svg-term-cli": "^2.1.1",
     "tempy": "^0.2.1"
   },
   "lint-staged": {

diff --git a/packages/babel-plugin-named-asset-import/package.json b/packages/babel-plugin-named-asset-import/package.json
@@ -12,6 +12,6 @@
     "index.js"
   ],
   "peerDependencies": {
-    "@babel/core": "7.0.0-beta.38"
+    "@babel/core": "7.0.0-beta.40"
   }
 }
diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json
@@ -12,21 +12,21 @@
     "dependencies.js"
   ],
   "dependencies": {
-    "@babel/core": "7.0.0-beta.38",
-    "@babel/plugin-proposal-class-properties": "7.0.0-beta.38",
-    "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.38",
-    "@babel/plugin-transform-classes": "7.0.0-beta.38",
-    "@babel/plugin-transform-destructuring": "7.0.0-beta.38",
-    "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.38",
-    "@babel/plugin-transform-react-display-name": "7.0.0-beta.38",
-    "@babel/plugin-transform-react-jsx": "7.0.0-beta.38",
-    "@babel/plugin-transform-regenerator": "7.0.0-beta.38",
-    "@babel/plugin-transform-runtime": "7.0.0-beta.38",
-    "@babel/preset-env": "7.0.0-beta.38",
-    "@babel/preset-flow": "7.0.0-beta.38",
-    "@babel/preset-react": "7.0.0-beta.38",
-    "babel-plugin-macros": "2.0.0",
+    "@babel/core": "7.0.0-beta.40",
+    "@babel/plugin-proposal-class-properties": "7.0.0-beta.40",
+    "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.40",
+    "@babel/plugin-transform-classes": "7.0.0-beta.40",
+    "@babel/plugin-transform-destructuring": "7.0.0-beta.40",
+    "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.40",
+    "@babel/plugin-transform-react-display-name": "7.0.0-beta.40",
+    "@babel/plugin-transform-react-jsx": "7.0.0-beta.40",
+    "@babel/plugin-transform-regenerator": "7.0.0-beta.40",
+    "@babel/plugin-transform-runtime": "7.0.0-beta.40",
+    "@babel/preset-env": "7.0.0-beta.40",
+    "@babel/preset-flow": "7.0.0-beta.40",
+    "@babel/preset-react": "7.0.0-beta.40",
+    "babel-plugin-macros": "2.1.0",
     "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.1.2"
+    "jest": "22.4.2"
   }
 }
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,63 +18,66 @@ class ModuleScopePlugin {
 
   apply(resolver) {
     const { appSrc } = 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?
-      const relative = path.relative(appSrc, request.context.issuer);
-      // If it's not in src/ or a subdirectory, not our request!
-      if (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 src/
-      const requestRelative = path.relative(appSrc, requestFullPath);
-      if (
-        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?
+        const relative = path.relative(appSrc, request.context.issuer);
+        // If it's not in src/ or a subdirectory, not our request!
+        if (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 src/
+        const requestRelative = path.relative(appSrc, requestFullPath);
+        if (
+          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
@@ -37,31 +37,31 @@
     "workspaceUtils.js"
   ],
   "dependencies": {
-    "@babel/code-frame": "7.0.0-beta.38",
+    "@babel/code-frame": "7.0.0-beta.40",
     "address": "1.0.3",
-    "browserslist": "2.11.3",
-    "chalk": "2.3.0",
-    "cross-spawn": "5.1.0",
+    "browserslist": "3.1.1",
+    "chalk": "2.3.1",
+    "cross-spawn": "6.0.4",
     "detect-port-alt": "1.1.5",
     "escape-string-regexp": "1.0.5",
-    "filesize": "3.5.11",
+    "filesize": "3.6.0",
     "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",
     "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.1.2"
+    "jest": "22.4.2"
   },
   "scripts": {
     "test": "jest"