fix: inject javascripts in the <head> tag for inject:true and scriptLoading:'defer'

jantimon · jantimon · commit 833b46bbcb5a · 2021-02-03T12:32:58.000+01:00
diff --git a/index.js b/index.js
@@ -302,7 +302,7 @@ function hookIntoCompiler (compiler, options, plugin) {
             .then(({ assetTags }) => {
               // Inject scripts to body unless it set explicitly to head
               const scriptTarget = options.inject === 'head' ||
-                (options.inject === false && options.scriptLoading !== 'blocking') ? 'head' : 'body';
+                (options.inject !== 'body' && options.scriptLoading !== 'blocking') ? 'head' : 'body';
               // Group assets to `head` and `body` tag arrays
               const assetGroups = generateAssetGroups(assetTags, scriptTarget);
               // Allow third-party-plugin authors to reorder and change the assetTags once they are grouped
diff --git a/spec/basic.spec.js b/spec/basic.spec.js
@@ -2540,6 +2540,29 @@ describe('HtmlWebpackPlugin', () => {
     }, ['<head><link href="styles.css" rel="stylesheet"></head>', '<script src="index_bundle.js"></script></body>'], null, done);
   });
 
+  it('should add the javascript assets to the head for inject:true with scriptLoading:defer', 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 MiniCssExtractPlugin({ filename: 'styles.css' }),
+        new HtmlWebpackPlugin({
+          scriptLoading: 'defer',
+          inject: true
+        })
+      ]
+    }, ['<script defer="defer" src="index_bundle.js"></script><link href="styles.css" rel="stylesheet"></head>'], null, done);
+  });
+
   it('should allow to use headTags and bodyTags directly in string literals', done => {
     testHtmlPlugin({
       mode: 'production',
