From 50b20f01247a0c4745e86fc16c5a68db206835c8 Mon Sep 17 00:00:00 2001
From: Tomi Pakarinen <tomi.pakarinen@resys.io>
Date: Tue, 4 Dec 2018 00:18:38 +0200
Subject: [PATCH 1/3] Added ExtractHtmlManifestPlugin

---
 .../ExtractHtmlManifestPlugin.js              | 48 +++++++++++++++++++
 packages/react-dev-utils/README.md            | 35 ++++++++++++++
 packages/react-dev-utils/package.json         |  1 +
 .../react-scripts/config/webpack.config.js    |  6 +++
 4 files changed, 90 insertions(+)
 create mode 100644 packages/react-dev-utils/ExtractHtmlManifestPlugin.js

diff --git a/packages/react-dev-utils/ExtractHtmlManifestPlugin.js b/packages/react-dev-utils/ExtractHtmlManifestPlugin.js
new file mode 100644
index 00000000000..945bd87668d
--- /dev/null
+++ b/packages/react-dev-utils/ExtractHtmlManifestPlugin.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// This Webpack plugin lets us interpolate custom variables into `index.html`.
+// Usage: `new InterpolateHtmlPlugin(HtmlWebpackPlugin, { 'MY_VARIABLE': 42 })`
+// Then, you can use %MY_VARIABLE% in your `index.html`.
+
+// It works in tandem with HtmlWebpackPlugin.
+// Learn more about creating plugins like this:
+// https://github.com/ampedandwired/html-webpack-plugin#events
+
+'use strict';
+var fs = require('fs');
+var path = require('path');
+
+class ExtractHtmlManifestPlugin {
+  constructor(htmlWebpackPlugin, opts) {
+    this.htmlWebpackPlugin = htmlWebpackPlugin;
+    this.opts = Object.assign(
+      {
+        fileName: 'html-manifest.json',
+        serialize: function(manifest) {
+          return JSON.stringify(manifest, null, 2);
+        },
+      },
+      opts || {}
+    );
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap('ExtractHtmlManifestPlugin', compilation => {
+      this.htmlWebpackPlugin
+        .getHooks(compilation)
+        .beforeAssetTagGeneration.tap('ExtractHtmlManifestPlugin', data => {
+          var outputFolder = compiler.options.output.path;
+          var outputFile = path.resolve(outputFolder, this.opts.fileName);
+          var output = this.opts.serialize(data.assets);
+          fs.writeFileSync(outputFile, output, 'utf8');
+        });
+    });
+  }
+}
+
+module.exports = ExtractHtmlManifestPlugin;
diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
index d615f66b5cf..56edcc98166 100644
--- a/packages/react-dev-utils/README.md
+++ b/packages/react-dev-utils/README.md
@@ -89,6 +89,41 @@ module.exports = {
 };
 ```
 
+#### `new ExtractHtmlManifestPlugin(htmlWebpackPlugin: HtmlWebpackPlugin, { fileName?: string, serializer?: (any) => string } )`
+
+This Webpack plugin generates manifest of assets injected to `index.html` by HtmlWebpackPlugin.<br>
+It works in tandem with [HtmlWebpackPlugin](https://github.com/ampedandwired/html-webpack-plugin) 4.x.
+
+```js
+var path = require('path');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var ExtractHtmlManifestPlugin = require('react-dev-utils/ExtractHtmlManifestPlugin');
+
+// Webpack config
+var publicUrl = '/my-custom-url';
+
+module.exports = {
+  output: {
+    // ...
+    publicPath: publicUrl + '/',
+  },
+  // ...
+  plugins: [
+    // Generates an `index.html` file with the <script> injected.
+    new ExtractHtmlManifestPlugin({
+      inject: true,
+      template: path.resolve('public/index.html'),
+    }),
+    // Generate `html-manifest.json` file.
+    new ExtractHtmlManifestPlugin(HtmlWebpackPlugin, {
+      fileName: 'html-manifest.json',
+    }),
+    // ...
+  ],
+  // ...
+};
+```
+
 #### `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.
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index b503019a5ea..07877786303 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -18,6 +18,7 @@
     "errorOverlayMiddleware.js",
     "eslintFormatter.js",
     "evalSourceMapMiddleware.js",
+    "ExtractHtmlManifestPlugin.js",
     "FileSizeReporter.js",
     "formatWebpackMessages.js",
     "getCacheIdentifier.js",
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 746884a03eb..a32d1c33469 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -22,6 +22,7 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const safePostCssParser = require('postcss-safe-parser');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const ExtractHtmlManifestPlugin = require('react-dev-utils/ExtractHtmlManifestPlugin');
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
@@ -556,6 +557,11 @@ module.exports = function(webpackEnv) {
       // in `package.json`, in which case it will be the pathname of that URL.
       // In development, this will be an empty string.
       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+      // Generates file html-manifest.json to output folder. HTML page can be
+      // reconstructed using this file.
+      new ExtractHtmlManifestPlugin(HtmlWebpackPlugin, {
+        filename: 'html-manifest.json',
+      }),
       // This gives some necessary context to module not found errors, such as
       // the requesting resource.
       new ModuleNotFoundPlugin(paths.appPath),

From eed998ca67839629823a192a0348adbebf665817 Mon Sep 17 00:00:00 2001
From: Tomi Pakarinen <tomi.pakarinen@resys.io>
Date: Tue, 4 Dec 2018 00:41:33 +0200
Subject: [PATCH 2/3] Update usage instructions

---
 packages/react-dev-utils/ExtractHtmlManifestPlugin.js | 5 ++---
 packages/react-dev-utils/README.md                    | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/react-dev-utils/ExtractHtmlManifestPlugin.js b/packages/react-dev-utils/ExtractHtmlManifestPlugin.js
index 945bd87668d..942a8990496 100644
--- a/packages/react-dev-utils/ExtractHtmlManifestPlugin.js
+++ b/packages/react-dev-utils/ExtractHtmlManifestPlugin.js
@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// This Webpack plugin lets us interpolate custom variables into `index.html`.
-// Usage: `new InterpolateHtmlPlugin(HtmlWebpackPlugin, { 'MY_VARIABLE': 42 })`
-// Then, you can use %MY_VARIABLE% in your `index.html`.
+// This Webpack plugin generates manifest of assets needed to reconstruct html page.
+// Usage: `new ExtractHtmlManifestPlugin(HtmlWebpackPlugin, { fileName: 'html-manifest.json' })`
 
 // It works in tandem with HtmlWebpackPlugin.
 // Learn more about creating plugins like this:
diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
index 56edcc98166..da88e986ca5 100644
--- a/packages/react-dev-utils/README.md
+++ b/packages/react-dev-utils/README.md
@@ -110,7 +110,7 @@ module.exports = {
   // ...
   plugins: [
     // Generates an `index.html` file with the <script> injected.
-    new ExtractHtmlManifestPlugin({
+    new HtmlWebpackPlugin({
       inject: true,
       template: path.resolve('public/index.html'),
     }),

From df2f0ede0784af60b7b97069e8b5ccf831fa6832 Mon Sep 17 00:00:00 2001
From: Tomi Pakarinen <tomi.pakarinen@resys.io>
Date: Tue, 4 Dec 2018 09:32:41 +0200
Subject: [PATCH 3/3] defer file generation

---
 packages/react-dev-utils/ExtractHtmlManifestPlugin.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/react-dev-utils/ExtractHtmlManifestPlugin.js b/packages/react-dev-utils/ExtractHtmlManifestPlugin.js
index 942a8990496..19483b3ef7c 100644
--- a/packages/react-dev-utils/ExtractHtmlManifestPlugin.js
+++ b/packages/react-dev-utils/ExtractHtmlManifestPlugin.js
@@ -28,6 +28,7 @@ class ExtractHtmlManifestPlugin {
       },
       opts || {}
     );
+    this.output = '{}';
   }
 
   apply(compiler) {
@@ -35,12 +36,14 @@ class ExtractHtmlManifestPlugin {
       this.htmlWebpackPlugin
         .getHooks(compilation)
         .beforeAssetTagGeneration.tap('ExtractHtmlManifestPlugin', data => {
-          var outputFolder = compiler.options.output.path;
-          var outputFile = path.resolve(outputFolder, this.opts.fileName);
-          var output = this.opts.serialize(data.assets);
-          fs.writeFileSync(outputFile, output, 'utf8');
+          this.output = this.opts.serialize(data.assets);
         });
     });
+    compiler.hooks.afterEmit.tap('ExtractHtmlManifestPlugin', () => {
+      var outputFolder = compiler.options.output.path;
+      var outputFile = path.resolve(outputFolder, this.opts.fileName);
+      fs.writeFileSync(outputFile, this.output, 'utf8');
+    });
   }
 }