feat: add crossOriginLoading option support (#313)

webpack-contrib · Nov 26, 2018 · ffb0d87 · ffb0d87
1 parent c12ddcb
commit ffb0d87
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 0 deletions.
diff --git a/src/index.js b/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);',
                 ]),

diff --git a/test/manual/index.html b/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>

diff --git a/test/manual/src/crossorigin.css b/test/manual/src/crossorigin.css
@@ -0,0 +1,3 @@
+.crossorigin {
+  background: lightgreen;
+}
diff --git a/test/manual/src/crossorigin.js b/test/manual/src/crossorigin.js
@@ -0,0 +1 @@
+import './crossorigin.css';
diff --git a/test/manual/src/index.js b/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;
+});
diff --git a/test/manual/webpack.config.js b/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": "*",
+    }
   },
 };