Skip to content

Commit 9f14df8

Browse files
committed
change default inject target to <head>
1 parent 77152fe commit 9f14df8

File tree

7 files changed

+1341
-390
lines changed

7 files changed

+1341
-390
lines changed

README.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ npm install --save-dev css-chunks-html-webpack-plugin \
2626
// your other options
2727
plugins: [
2828
new ExtractCssChunks(),
29-
new CssChunkHashPlugin({ inject: true }),
29+
new CssChunkHashPlugin({ inject: 'head' }),
3030
new HtmlWebpackPlugin(),
3131
]
3232
};
@@ -37,17 +37,20 @@ npm install --save-dev css-chunks-html-webpack-plugin \
3737

3838
You can pass an object of configuration options to CssChunkHashPlugin. Allowed values are as follows:
3939

40-
* `inject`: `true` | `false` whether to inject chunks paths object into HTML, used for manually adding chunks paths using custom teamplte for HtmlWebpackPlugin (default `true`)
40+
* `inject`: `'head'` | `'body'` | `false` whether to inject chunks paths script into HTML, used for manually adding
41+
chunks paths using custom template for HtmlWebpackPlugin (default `true`)
4142

42-
The CSS chunks paths map is saved in `htmlWebpackPlugin.files.cssHash` in your template. So if you want to manually add CSS chunks map you can do (if you are using EJS):
43+
The CSS chunks paths map is saved in `htmlWebpackPlugin.files.cssHash` in your template. So if you want to manually add
44+
CSS chunks map you can do (if you are using EJS):
4345

4446
```ejs
4547
<script type="text/javascript">
4648
window.__CSS_CHUNKS__ = JSON.parse('<%= JSON.stringify(htmlWebpackPlugin.files.cssHash) %>')
4749
</script>
4850
```
4951

50-
Otherwise, if you set `inject: true` the script tag with `window.__CSS_CHUNKS__` will be injected in `head` or `body` according your HtmlWebpackPlugin configuration.
52+
By default, it will inject script tag into `<head>`. If you want to inject the script tag with `window.__CSS_CHUNKS__`
53+
into `<body>` set `inject: 'body'`,
5154

5255
## Example
5356

examples/dist/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Webpack App</title>
6-
<link href="a.2de6d07c0b145266b47da1fee4ba9e64.css" rel="stylesheet"></head>
6+
<link href="a.2de6d07c0b145266b47da1fee4ba9e64.css" rel="stylesheet"><script type="text/javascript">window.__CSS_CHUNKS__ = {"b":"b.ebc1b148fe8d28f516acec988b41824b.css","d":"d.c747f927a615b180f5d183083932d762.css","c":"c.78fd17ff857fa133efffa56fabf9d60d.css","a":"a.2de6d07c0b145266b47da1fee4ba9e64.css"}</script></head>
77
<body>
8-
<script type="text/javascript" src="a.1c933eaa25092671241c.js"></script><script type="text/javascript">window.__CSS_CHUNKS__ = {"b":"b.ebc1b148fe8d28f516acec988b41824b.css","d":"d.c747f927a615b180f5d183083932d762.css","c":"c.78fd17ff857fa133efffa56fabf9d60d.css","a":"a.2de6d07c0b145266b47da1fee4ba9e64.css"}</script></body>
8+
<script type="text/javascript" src="a.64aca92656e84648feb7.js"></script></body>
99
</html>

examples/webpack.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ module.exports = {
1515
publicPath: '',
1616
},
1717
module: {
18-
loaders: [
18+
rules: [
1919
{
2020
test: /\.css$/,
2121
use: ExtractCssChunks.extract({
@@ -43,7 +43,7 @@ module.exports = {
4343
},
4444
plugins: [
4545
new ExtractCssChunks(),
46-
new CssChunkHashPlugin({ inject: true }),
46+
new CssChunkHashPlugin(),
4747
new HtmlWebpackPlugin(),
4848
]
4949
};

lib/index.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
function CssChunkHashPlugin(options) {
22
this.options = Object.assign({
3-
inject: true,
3+
inject: 'head',
44
}, options);
55
}
66

@@ -36,10 +36,11 @@ CssChunkHashPlugin.prototype.apply = function (compiler) {
3636
callback(null, htmlPluginData);
3737
});
3838

39-
if (this.options.inject) {
39+
const inject = this.options.inject;
40+
41+
if (inject) {
4042
compilation.plugin('html-webpack-plugin-alter-asset-tags', (htmlPluginData, callback) => {
4143
const tag = this.getScriptTag(cssHash);
42-
const inject = htmlPluginData.plugin.options.inject;
4344

4445
if (inject === 'head') {
4546
htmlPluginData.head.push(tag)

0 commit comments

Comments
 (0)