码迷,mamicode.com
首页 > Web开发 > 详细

webpack插件之html-webpack-plugin

时间:2019-08-27 10:38:12      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:resolve   export   options   一个   过多   package   entry   class   com   

官方文档: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文件作为模板)

4. favicon:指定网站图标的路径

5. hash:给模板中包含的所有css和js文件设置一个唯一的hash字符串插入到文件名中

6. inject:该属性决定了脚本文件插入的位置。值可以是字符串也可以是布尔值,默认为true,字符串值可以为‘head’(插入到head标签)和‘body’(插入到body底部)

7. minify:压缩HTML,默认为true,值也可以为对象

 

本文只是先简单介绍了下html-webpack-plugin插件的各个常用配置,因本人水平有限,不做过多深入讲解,日后遇到问题,及时更新。

webpack插件之html-webpack-plugin

标签:resolve   export   options   一个   过多   package   entry   class   com   

原文地址:https://www.cnblogs.com/hueralin/p/11416640.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!