Upgrade html-webpack-plugin to fix tests (#5031)

* Upgrade html webpack plugin

* Fix build

packages/react-dev-utils/InterpolateHtmlPlugin.js

@@ -6,7 +6,7 @@
  */
 
 // This Webpack plugin lets us interpolate custom variables into `index.html`.
-// Usage: `new InterpolateHtmlPlugin({ 'MY_VARIABLE': 42 })`
+// Usage: `new InterpolateHtmlPlugin(HtmlWebpackPlugin, { 'MY_VARIABLE': 42 })`
 // Then, you can use %MY_VARIABLE% in your `index.html`.
 
 // It works in tandem with HtmlWebpackPlugin.
@@ -17,15 +17,16 @@
 const escapeStringRegexp = require('escape-string-regexp');
 
 class InterpolateHtmlPlugin {
-  constructor(replacements) {
+  constructor(htmlWebpackPlugin, replacements) {
+    this.htmlWebpackPlugin = htmlWebpackPlugin;
     this.replacements = replacements;
   }
 
   apply(compiler) {
     compiler.hooks.compilation.tap('InterpolateHtmlPlugin', compilation => {
-      compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap(
-        'InterpolateHtmlPlugin',
-        data => {
+      this.htmlWebpackPlugin
+        .getHooks(compilation)
+        .beforeEmit.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,8 +35,7 @@ class InterpolateHtmlPlugin {
               value
             );
           });
-        }
-      );
+        });
     });
   }
 }

packages/react-dev-utils/README.md

@@ -34,7 +34,7 @@ var publicUrl = '/my-custom-url';
 module.exports = {
   output: {
     // ...
-    publicPath: publicUrl + '/'
+    publicPath: publicUrl + '/',
   },
   // ...
   plugins: [
@@ -45,18 +45,17 @@ module.exports = {
     }),
     // 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
+    new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
+      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.
     }),
     // ...
   ],
   // ...
-}
+};
 ```
 
-
 #### `new ModuleScopePlugin(appSrc: string | string[], allowedFiles?: string[])`
 
 This Webpack plugin ensures that relative imports from app's source directories don't reach outside of it.
@@ -65,7 +64,6 @@ This Webpack plugin ensures that relative imports from app's source directories
 var path = require('path');
 var ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 
-
 module.exports = {
   // ...
   resolve: {
@@ -77,7 +75,7 @@ module.exports = {
     // ...
   },
   // ...
-}
+};
 ```
 
 #### `new WatchMissingNodeModulesPlugin(nodeModulesPath: string)`
@@ -99,10 +97,10 @@ module.exports = {
     // to restart the development server for Webpack to discover it. This plugin
     // makes the discovery automatic so you don't have to restart.
     // See https://github.com/facebook/create-react-app/issues/186
-    new WatchMissingNodeModulesPlugin(path.resolve('node_modules'))
+    new WatchMissingNodeModulesPlugin(path.resolve('node_modules')),
   ],
   // ...
-}
+};
 ```
 
 #### `checkRequiredFiles(files: Array<string>): boolean`
@@ -115,10 +113,12 @@ If a file is not found, prints a warning message and returns `false`.
 var path = require('path');
 var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 
-if (!checkRequiredFiles([
-  path.resolve('public/index.html'),
-  path.resolve('src/index.js')
-])) {
+if (
+  !checkRequiredFiles([
+    path.resolve('public/index.html'),
+    path.resolve('src/index.js'),
+  ])
+) {
   process.exit(1);
 }
 ```
@@ -145,22 +145,22 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter');
 // In your webpack config:
 // ...
 module: {
-   rules: [
-     {
-        test: /\.(js|jsx)$/,
-        include: paths.appSrc,
-        enforce: 'pre',
-        use: [
-          {
-            loader: 'eslint-loader',
-            options: {
-              // Pass the formatter:
-              formatter: eslintFormatter,
-            },
+  rules: [
+    {
+      test: /\.(js|jsx)$/,
+      include: paths.appSrc,
+      enforce: 'pre',
+      use: [
+        {
+          loader: 'eslint-loader',
+          options: {
+            // Pass the formatter:
+            formatter: eslintFormatter,
           },
-        ],
-      }
-   ]
+        },
+      ],
+    },
+  ];
 }
 ```
 
@@ -264,7 +264,6 @@ Attempts to open the browser with a given URL.<br>
 On Mac OS X, attempts to reuse an existing Chrome tab via AppleScript.<br>
 Otherwise, falls back to [opn](https://github.com/sindresorhus/opn) behavior.
 
-
 ```js
 var path = require('path');
 var openBrowser = require('react-dev-utils/openBrowser');
@@ -321,10 +320,10 @@ module.exports = {
     // require.resolve('webpack-dev-server/client') + '?/',
     // require.resolve('webpack/hot/dev-server'),
     'react-dev-utils/webpackHotDevClient',
-    'src/index'
+    'src/index',
   ],
   // ...
-}
+};
 ```
 
 #### `getCSSModuleLocalIdent(context: Object, localIdentName: String, localName: String, options: Object): string`
@@ -340,7 +339,7 @@ const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
 // In your webpack config:
 // ...
 module: {
-   rules: [
+  rules: [
     {
       test: /\.module\.css$/,
       use: [
@@ -358,8 +357,7 @@ module: {
           options: postCSSLoaderOptions,
         },
       ],
-    }
-   ]
+    },
+  ];
 }
 ```
-

packages/react-scripts/config/webpack.config.dev.js

@@ -363,7 +363,7 @@ module.exports = {
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     // In development, this will be an empty string.
-    new InterpolateHtmlPlugin(env.raw),
+    new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
     new webpack.DefinePlugin(env.stringified),

packages/react-scripts/config/webpack.config.prod.js

@@ -409,7 +409,7 @@ module.exports = {
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     // In production, it will be an empty string unless you specify "homepage"
     // in `package.json`, in which case it will be the pathname of that URL.
-    new InterpolateHtmlPlugin(env.raw),
+    new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
     // It is absolutely essential that NODE_ENV was set to production here.

packages/react-scripts/package.json

@@ -47,7 +47,7 @@
     "fs-extra": "5.0.0",
     "graphql": "0.13.2",
     "graphql-tag": "2.9.2",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
     "jest": "23.5.0",
     "loader-utils": "1.1.0",