Generate html-manifest.json of html assets.

packages/react-dev-utils/ExtractHtmlManifestPlugin.js

@@ -0,0 +1,50 @@
+/**
+ * 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 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:
+// 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 || {}
+    );
+    this.output = '{}';
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap('ExtractHtmlManifestPlugin', compilation => {
+      this.htmlWebpackPlugin
+        .getHooks(compilation)
+        .beforeAssetTagGeneration.tap('ExtractHtmlManifestPlugin', data => {
+          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');
+    });
+  }
+}
+
+module.exports = ExtractHtmlManifestPlugin;

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 HtmlWebpackPlugin({
+      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.

packages/react-dev-utils/package.json

@@ -18,6 +18,7 @@
     "errorOverlayMiddleware.js",
     "eslintFormatter.js",
     "evalSourceMapMiddleware.js",
+    "ExtractHtmlManifestPlugin.js",
     "FileSizeReporter.js",
     "formatWebpackMessages.js",
     "getCacheIdentifier.js",

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),