Merge pull request #92 from waysact/webpack-assets-manifest

Document webpack-asset-manifest integration

Author: hughevans

README.md

@@ -123,6 +123,18 @@ When this value is falsy, the plugin doesn't run and no integrity
 values are calculated. It is recommended to disable the plugin in
 development mode.
 
+## Exporting `integrity` values
+
+You might want to export generated integrity hashes, perhaps for use
+with SSR. We recommend
+[webpack-assets-manifest](https://github.com/webdeveric/webpack-assets-manifest)
+for this purpose. When configured with option `integrity: true` it
+will include the hashes generated by this plugin in the manifest
+(requires webpack-assets-manifest version >= 3 which in turn requires
+Webpack >= 4.)
+
+[Example usage with webpack-assets-manifest](examples/webpack-assets-manifest/).
+
 ## Caveats
 
 ### Proxies
@@ -165,12 +177,12 @@ using a tool such as [`http-server`](https://github.com/indexzero/http-server).
 
 ### Safari and Assets that Require Cookies
 
-As detailed in [Webpack Issue
-#6972](https://github.com/webpack/webpack/issues/6972), the
-`crossOrigin` attribute can break loading of assets in certain edge
-cases due to a bug in Safari. Since SRI requires the `crossOrigin`
-attribute to be set, you may run into this case even when source URL
-is same-origin with respect to the asset.
+As detailed in
+[Webpack Issue #6972](https://github.com/webpack/webpack/issues/6972),
+the `crossOrigin` attribute can break loading of assets in certain
+edge cases due to a bug in Safari. Since SRI requires the
+`crossOrigin` attribute to be set, you may run into this case even
+when source URL is same-origin with respect to the asset.
 
 ## Further Reading
 

examples/webpack-assets-manifest/README.md

@@ -0,0 +1,7 @@
+# Integration with webpack-assets-manifest
+
+[webpack-assets-manifest](https://github.com/webdeveric/webpack-assets-manifest)
+has a somewhat
+[undocumented feature](https://github.com/webdeveric/webpack-assets-manifest/blob/9261b516209ece4311b77f200b78ff5dc945985f/src/WebpackAssetsManifest.js#L448-L449)
+where it will include the `integrity` value generated by this plugin
+(by webpack-subresource-integrity) when configured with `integrity: true`.

examples/webpack-assets-manifest/index.js

@@ -0,0 +1 @@
+console.log('ok');

examples/webpack-assets-manifest/test.js

@@ -0,0 +1,18 @@
+var expect = require('expect');
+var fs = require('fs');
+var path = require('path');
+var webpackVersion = Number(
+  require('webpack/package.json').version.split('.')[0]
+);
+
+module.exports.skip = function skip() {
+  // webpack-assets-manifest 3 requires Webpack 4
+  return webpackVersion < 4;
+};
+
+module.exports.check = function check(stats) {
+  var manifest = JSON.parse(
+    fs.readFileSync(path.join(__dirname, 'dist/manifest.json'), 'utf-8')
+  );
+  expect(manifest['index.js'].integrity).toMatch(/sha384-.* sha512-.*/);
+};

examples/webpack-assets-manifest/webpack.config.js

@@ -0,0 +1,18 @@
+var SriPlugin = require('webpack-subresource-integrity');
+var WebpackAssetsManifest = require('webpack-assets-manifest');
+
+module.exports = {
+  entry: {
+    index: './index.js'
+  },
+  output: {
+    crossOriginLoading: 'anonymous'
+  },
+  plugins: [
+    new SriPlugin({
+      hashFuncNames: ['sha384', 'sha512'],
+      enabled: true
+    }),
+    new WebpackAssetsManifest({ integrity: true })
+  ]
+};

package.json

@@ -71,7 +71,8 @@
     "soupselect": "^0.2.0",
     "style-loader": "^0.18.0",
     "tmp": "^0.0.31",
-    "webpack": "^1.12.11"
+    "webpack": "^1.12.11",
+    "webpack-assets-manifest": "^3.0.0"
   },
   "peerDependencies": {
     "html-webpack-plugin": "^2.21.0 || ~3 || >=4.0.0-alpha.2 <5",