fix: load script files before style files files in defer script loading mode

jantimon · jantimon · commit 97f9fb9a68e4 · 2020-03-17T22:09:05.000+01:00
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);
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -833,7 +833,10 @@ class HtmlWebpackPlugin {`
`833`	`833`	`if (scriptTarget === 'body') {`
`834`	`834`	`result.bodyTags.push(...assetTags.scripts);`
`835`	`835`	`} else {`
`836`		`- result.headTags.push(...assetTags.scripts);`
	`836`	`+ // If script loading is blocking add the scripts to the end of the head`
	`837`	`+ // If script loading is non-blocking add the scripts infront of the css files`
	`838`	`+ const insertPosition = this.options.scriptLoading === 'blocking' ? result.headTags.length : assetTags.meta.length;`
	`839`	`+ result.headTags.splice(insertPosition, 0, ...assetTags.scripts);`
`837`	`840`	`}`
`838`	`841`	`return result;`
`839`	`842`	`}`