Skip to content

Commit

Permalink
fix: load script files before style files files in defer script loadi…
Browse files Browse the repository at this point in the history
…ng mode
  • Loading branch information
jantimon committed Mar 17, 2020
1 parent e97ce17 commit 97f9fb9
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 1 deletion.
5 changes: 4 additions & 1 deletion index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
22 changes: 22 additions & 0 deletions spec/basic.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});

0 comments on commit 97f9fb9

Please sign in to comment.