fix: load script files before style files files in defer script loadi…

…ng mode
jantimon · Mar 17, 2020 · 97f9fb9 · 97f9fb9
1 parent e97ce17
commit 97f9fb9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/index.js b/index.js
@@ -833,7 +833,10 @@ class HtmlWebpackPlugin {
     if (scriptTarget === 'body') {
       result.bodyTags.push(...assetTags.scripts);
     } else {
-      result.headTags.push(...assetTags.scripts);
+      // If script loading is blocking add the scripts to the end of the head
+      // If script loading is non-blocking add the scripts infront of the css files
+      const insertPosition = this.options.scriptLoading === 'blocking' ? result.headTags.length : assetTags.meta.length;
+      result.headTags.splice(insertPosition, 0, ...assetTags.scripts);
     }
     return result;
   }

diff --git a/spec/basic.spec.js b/spec/basic.spec.js
@@ -2282,4 +2282,26 @@ describe('HtmlWebpackPlugin', () => {
       })]
     }, [/<body>.*<script defer="defer"/], null, done);
   });
+
+  it('should allow to inject scripts with a defer in front of styles', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/theme.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js'
+      },
+      module: {
+        rules: [
+          { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
+        ]
+      },
+      plugins: [
+        new HtmlWebpackPlugin({
+          scriptLoading: 'defer'
+        }),
+        new MiniCssExtractPlugin({ filename: 'styles.css' })
+      ]
+    }, [/<script defer="defer".+<link href="styles.css"/], null, done);
+  });
 });