Merge pull request #137 from waysact/135-webpack-5-named-chunks

Fix bug with named chunks in Webpack 5

Author: jscheid

examples/dynamic-modified/test.js

@@ -12,7 +12,7 @@ module.exports.skip = function skip() {
 
 module.exports.check = function check(stats, url, browser) {
   const otherAsset = Object.keys(stats.compilation.assets).find(key => key !== 'index.js' && key.endsWith(".js"));
-  fs.writeFileSync('dist/' + otherAsset, 'xxx');
+  fs.writeFileSync('dist/' + otherAsset, 'console.log("corrupted");');
 
   return defaultCheck(stats, url, browser);
 };

examples/dynamic-named-chunks/README.md

@@ -0,0 +1,4 @@
+# With a dynamically loaded, named chunk #hwp
+
+Ensure that when a named chunk is loaded dynamically with Webpack 5,
+it receives a SRI hash.

examples/dynamic-named-chunks/chunk.js

@@ -0,0 +1 @@
+;

examples/dynamic-named-chunks/index.js

@@ -0,0 +1,38 @@
+let scriptsWithIntegrity = [];
+
+const observer = new MutationObserver(mutationsList => {
+  Array.from(mutationsList).forEach(mutation => {
+    Array.from(mutation.addedNodes || []).forEach(node => {
+      if (node.nodeName === 'SCRIPT') {
+        if (
+          node.getAttribute('crossOrigin') === 'anonymous' &&
+          node
+            .getAttribute('integrity')
+            .match(/^sha256-[-A-Za-z0-9+/=]{44} sha384-[-A-Za-z0-9+/=]{64}$/)
+        ) {
+          scriptsWithIntegrity.push(node);
+        }
+      }
+    });
+  });
+});
+
+observer.observe(document.querySelector('head'), { childList: true });
+
+import('./chunk')
+  .then(() => {
+    if (
+      scriptsWithIntegrity.some(
+        script =>
+          new URL(script.getAttribute('src')).pathname === '/chunk_js.js'
+      )
+    ) {
+      console.log('ok');
+    } else {
+      console.log('error');
+    }
+  })
+  .catch(e => {
+    console.error(e);
+    console.log('error');
+  });

examples/dynamic-named-chunks/test.js

@@ -0,0 +1,8 @@
+var webpackVersionComponents = require('webpack/package.json').version.split(
+  '.'
+);
+var webpackVersionMajor = Number(webpackVersionComponents[0]);
+
+module.exports.skip = function skip() {
+  return webpackVersionMajor < 5;
+};

examples/dynamic-named-chunks/webpack.config.js

@@ -0,0 +1,21 @@
+var SriPlugin = require('webpack-subresource-integrity');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: {
+    index: './index.js'
+  },
+  output: {
+    crossOriginLoading: 'anonymous',
+  },
+  optimization: {
+    chunkIds: 'named',
+  },
+  plugins: [
+    new SriPlugin({
+      hashFuncNames: ['sha256', 'sha384'],
+      enabled: true
+    }),
+    new HtmlWebpackPlugin()
+  ]
+};

jmtp.js

@@ -63,7 +63,7 @@ WebIntegrityJsonpMainTemplatePlugin.prototype.addAttribute =
     return (Template.asString || mainTemplate.asString)([
       source,
       elName + '.integrity = __webpack_require__.sriHashes[' +
-        ((webpackVersionMajor >= 5 && elName === 'script') ? 'key.match(/^chunk-([0-9]+)$/)[1]' : 'chunkId') +
+        ((webpackVersionMajor >= 5 && elName === 'script') ? 'key.match(/^chunk-(.+)$/)[1]' : 'chunkId') +
         '];',
       elName + '.crossOrigin = ' + JSON.stringify(outputOptions.crossOriginLoading) + ';',
     ]);