webpack插件之html-webpack-plugin
Posted hueralin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack插件之html-webpack-plugin相关的知识，希望对你有一定的参考价值。
官方文档：https://www.npmjs.com/package/html-webpack-plugin
html-webpack-plugin 插件专门为由webpack打包后的js提供一个载体，即一个HTML模板，里面通过script标签引用打包后的JS。
下面来看一下基本配置：
1 const Path = reqiure(‘path) 2 // 引入插件 3 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘) 4 5 module.exports = 6 entry: ‘index.js‘, 7 output: 8 path: Path.resolve(__dirname, ‘/dist‘) 9 filename: ‘bundle.js‘ 10 , 11 plugins: [ 12 // 所有的插件都是对象，需要new出来 13 new HtmlWebpackPlugin() 14 // 上面是一个0配置的html-webpack-plugin插件对象 15 ] 16
上面只是单纯的创建了一个插件对象，并没有做其他配置，所以默认产生的HTML模板是这样的：
1 <!-- HTML5 --> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Webpack App</title> 7 </head> 8 <body> 9 <script src="bundle.js"></script> 10 </body> 11 </html>
当然，毕竟该插件是提供一个承载JS的模板，如果你对它的默认模板不满意，那么你完全可以自定义一个模板，下面来看一下它常见的配置项。
Options：
1. title：配置模板的标题
2. filename：配置模板的文件名
3. template：指定模板文件的路径（这里是选择一个你自定义的html文件作为模板）
5. hash：给模板中包含的所有css和js文件设置一个唯一的hash字符串插入到文件名中
6. inject：该属性决定了脚本文件插入的位置。值可以是字符串也可以是布尔值，默认为true，字符串值可以为‘head’（插入到head标签）和‘body’（插入到body底部）
7. minify：压缩HTML，默认为true，值也可以为对象
本文只是先简单介绍了下html-webpack-plugin插件的各个常用配置，因本人水平有限，不做过多深入讲解，日后遇到问题，及时更新。
以上是关于webpack插件之html-webpack-plugin的主要内容，如果未能解决你的问题，请参考以下文章
Vue 教程(三十四)webpack 之 BannerPlugin 插件
Vue 教程(三十六)webpack 之代码混淆插件 Uglifyjs