作用
简化HTML文件的创建
遇到的问题
1. 在模板中使用 <%= HtmlWebpackPlugin.options.title %> 报错:HtmlWebpackPlugin is undefined
HtmlWebpackPlugin => 首字母小写 htmlWebpackPlugin
2. 配置项
{ plugins: [ new htmlWebpackPlugin({ template: '模板所在目录', title: '生成的HTML文档的标题', filename: '输出的html文件名', inject: 'true |'head'|'body'|false将assets注入template或templateContent', favicon: '将给定的图标路径添加到输出html', minify: '{...} | false传递html-minifier选项对象来缩小输出', hash: 'true | false如果true然后在所有包含的脚本和CSS文件中附加一个唯一的webpack编译哈希。这对于缓存清除非常有用', cache: 'true | falseif true(默认)只有在更改文件时才尝试发出文件。', showErrors: 'true | false如果true(默认)错误的详细信息将被写入HTML页面', chunks: '允许添加的chunk', chunksSortMode: '允许控制如何将批处理包含在html之前进行排序。允许的值:'none'| 'auto'| '依赖'| {function} - 默认值:'auto'', excludeChunks: '允许您跳过一些chunk', xhtml:"true | false如果true将link标签渲染为自动关闭,则符合XHTML。默认是false" }) ] }
3. 将js脚本直接以inline的形式插入到htm页面(这样做可以减少http请求)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title><%= htmlWebpackPlugin.options.title %></title> <!-- 直接引入的例子 --> <script type="text/javascript"> <%= compilation.assets[htmlWebpackPlugin.files.chunks.vendors.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> </script> </head> <body> </body> </html>