feat: add crossOriginLoading option support (#313)

Author: chikara-chan

src/index.js

@@ -272,6 +272,7 @@ class MiniCssExtractPlugin {
           const chunkMap = this.getCssChunkObject(chunk);
           if (Object.keys(chunkMap).length > 0) {
             const chunkMaps = chunk.getChunkMaps();
+            const { crossOriginLoading } = mainTemplate.outputOptions;
             const linkHrefPath = mainTemplate.getAssetPath(
               JSON.stringify(this.options.chunkFilename),
               {
@@ -365,6 +366,17 @@ class MiniCssExtractPlugin {
                   ]),
                   '};',
                   'linkTag.href = fullhref;',
+                  crossOriginLoading
+                    ? Template.asString([
+                        `if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`,
+                        Template.indent(
+                          `linkTag.crossOrigin = ${JSON.stringify(
+                            crossOriginLoading
+                          )};`
+                        ),
+                        '}',
+                      ])
+                    : '',
                   'var head = document.getElementsByTagName("head")[0];',
                   'head.appendChild(linkTag);',
                 ]),

test/manual/index.html

@@ -47,6 +47,10 @@
     <p>Preloaded inlined CSS: Must be green.</p>
     <p><button class="preloaded-button2">Pressing this button</button> displays an alert and should turn red.</p>
   </div>
+  <div class="test crossorigin">
+    <p>CrossOriginLoading Option: Must be red.</p>
+    <p><button>Pressing this button</button> loads chunks with crossorigin attribute and should turn green.</p>
+  </div>
   <div class="errors"></div>
   <script async defer src="/dist/main.js"></script>
 </body>

test/manual/src/crossorigin.css

@@ -0,0 +1,3 @@
+.crossorigin {
+  background: lightgreen;
+}

test/manual/src/crossorigin.js

@@ -0,0 +1 @@
+import './crossorigin.css';

test/manual/src/index.js

@@ -24,3 +24,17 @@ makeButton(".preloaded-button1", () => import(/* webpackChunkName: "preloaded1"
 makeButton(".preloaded-button2", () => import(/* webpackChunkName: "preloaded2" */ './preloaded2'));
 
 makeButton(".lazy-failure-button", () => import('./lazy-failure.js'), false);
+
+makeButton(".crossorigin", () => {
+  const originalPublicPath = __webpack_public_path__;
+  __webpack_public_path__ = "http://0.0.0.0:8080/dist/";
+  const promise = import("./crossorigin").then(() => {
+    const lastTwoElements = Array.from(document.head.children).slice(-2);
+    const hasCrossorigin = lastTwoElements.every(element => element.crossOrigin === "anonymous");
+    if (!hasCrossorigin) {
+      throw new Error('Chunks miss crossorigin="anonymous" attribute.')
+    }
+  });
+  __webpack_public_path__ = originalPublicPath;
+  return promise;
+});

test/manual/webpack.config.js

@@ -5,6 +5,7 @@ module.exports = {
   output: {
     chunkFilename: "[contenthash].js",
     publicPath: '/dist/',
+    crossOriginLoading: 'anonymous',
   },
   module: {
     rules: [
@@ -25,5 +26,8 @@ module.exports = {
   ],
   devServer: {
     contentBase: __dirname,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    }
   },
 };