官方文档：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插件的各个常用配置，因本人水平有限，不做过多深入讲解，日后遇到问题，及时更新。
原文地址：https://www.cnblogs.com/hueralin/p/11416640.html
时间： 2024-11-01 20:30:07