diff --git a/packages/react-dev-utils/ExtractHtmlManifestPlugin.js b/packages/react-dev-utils/ExtractHtmlManifestPlugin.js new file mode 100644 index 00000000000..19483b3ef7c --- /dev/null +++ b/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; diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index d615f66b5cf..da88e986ca5 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.
+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