详解html-webpack-plugin配置

作用

简化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>

posted on 2017-04-09 10:10 码先生阅读(1006) 评论(0) 编辑收藏举报