@@ -29,34 +29,57 @@ module.exports = {
2929 files: [
3030 {
3131 match: / . * \. woff2/ ,
32- attributes: { rel : ' preload ' , as: ' font' : ' font/woff2' : true },
32+ attributes: {as: ' font' : ' font/woff2' : true },
3333 },
3434 {
3535 match: / vendors\. [a-z -0-9 ] * . css/ ,
36- attributes: { rel : ' preload ' , as: ' style'
36+ attributes: {as: ' style'
3737 },
38- ],
38+ ]
3939 })
4040 ]
4141}
4242```
4343
44+ ** Options**
4445
45- ** HTML file**
46+ * files: An array of files object
47+ * match: A regular expression to target files you want to preload
48+ * attributes: Any attributes you want to use. The plugin will add the attribute ` rel="preload" ` by default.
4649
47- Add ` <!-- html-webpack-inject-preload --> ` to indicate where to inject preload links.
50+ ** Usage**
51+
52+ The plugin is really simple to use. The plugin injects in ` headTags ` , before any link, the preload elements.
53+
54+ For example
4855
4956``` html
5057<!DOCTYPE html>
5158<html >
5259 <head >
5360 <meta charset =" utf-8"
5461 <title >Webpack App</title >
55- <!-- html-webpack-inject-preload -->
56- <link href =" dist/main.css"
62+ <%= htmlWebpackPlugin.tags.headTags %>
5763 </head >
5864 <body >
5965 <script src =" index_bundle.js" script >
6066 </body >
6167</html >
62- ```
68+ ```
69+
70+ will generate
71+
72+ ``` html
73+ <!DOCTYPE html>
74+ <html >
75+ <head >
76+ <meta charset =" utf-8"
77+ <title >Webpack App</title >
78+ <link href =" dist/fonts/font.woff2" rel =" preload" type =" font/woff2" crossorigin >
79+ <link href =" dist/css/main.css"
80+ </head >
81+ <body >
82+ <script src =" index_bundle.js" script >
83+ </body >
84+ </html >
85+ ```
0 commit comments