详解html-webpack-plugin插件(用法总结)


Posted in Javascript onSeptember 12, 2018

html-webpack-plugin 插件是用于编译 Webpack 项目中的 html 类型的文件,如果直接将 html 文件置于 ./src 目录中,用 Webpack 打包时是不会编译到生产环境中的。因为 Webpack 编译任何文件都需要基于配置文件先行配置的。

Webpack 插件使用三步曲:安装>引入>配置

npm 安装

npm install --save-dev html-webpack-plugin

yarn 安装

yarn add html-webpack-plugin --dev

html-webpack-plugin 入口未定义时

//webpack.config.js 
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: path.resolve(__dirname, './src/app.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new htmlWebpackPlugin()
  ]
}

输出的 html 文件为:dist/index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
 </head>
 <body>
 <script type="text/javascript" src="home.js"></script></body>
</html>

此 webpack.config.js 配置文件,是最简用法 html-webpack-plugin 甚至未传递任何参数,但它基于这个原则 Entrypoint undefined = index.html 当未定义此插件的入口时,默认为 index.html,输出同样是 index.html。
所以未定义入口时,不论 ./src 下有任何名称的 html 文件都不会被打包处理,但是会默认输出 index.html 文件。

html-webpack-plugin 中任何自定义参数设置都会覆盖默认值

简单定义一个入口(在参数对象的 template 字段中设置)看看效果:

./src/index.html 中有这个文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="test">html webpack plugin</div>
</body>
</html>

webpack.config.js 增加 template 字段

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: path.resolve(__dirname, './src/app.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index.html'//只增加了这行
    })
  ]
}

打包结果是 dist/home.js 和 dist/index.html 其中 html 文件内容如下,和之前src文件中创建的完全一样,证明自定义入口生效,且覆盖了默认入口

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="test">html webpack plugin</div>
</body>
</html>

template: './src/index2.html' 这里,template 的值就是 html 文件的入口,相当于js文件的 entry 字段的作用,只设置 template时,默认输出为 index.html, 输出文件名通过 `filename` 字段设置

template指定你生成的文件所依赖哪一个html文件模板,模板类型可以是html、jade、ejs等。但是要注意的是,如果想使用自定义的模板文件的时候,你需要安装对应的loader。

当配置了 html 文件的出口 filename 时

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: path.resolve(__dirname, './src/app.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index2.html',
      filename: 'index.output.html'
    })
  ]
}

输出为 dist/home.js 和 dist/index.output.html

同 webpack.config.js 配置文件的 output 属性的 filename 字段一样,htmlWebpackPlugin({})的filname 字段也可以在其值加文件夹实现分类

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: path.resolve(__dirname, './src/app.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index2.html',
      filename: './category/index.output.html'
    })
  ]
}

输出为 dist/home.js 和 dist/category/index.output.html

title 字段,只有未定义 template 模板文件的时候生效,即只在使用默认输出文件index.html 的时候,title 设置才有用,否则它的值,会被你指定的 template 文件的title所覆盖,title 默认值为 Webpack App

favicon

'./somepath/favicon.ico',它的值是你的 favicon.ico 图标的路径

inject的四个值: true body head false 指定在何处(body or head)引入 script 文件

  • true 默认值,script标签位于html文件的 body 底部
  • body script标签位于html文件的 body 底部
  • head script标签位于html文件的 head中
  • false 不插入生成的js文件,这个几乎不会用到的

其中 body 和 head 为字符串类型需要加引号,false和true为 Boolean 类型值

minify 的值是一个对象,设置压缩属性

plugins: [

new HtmlWebpackPlugin({
  ...
  minify: {
    removeAttributeQuotes: true // 移除属性的引号
  }
})
]
  • hash:布尔值,用于清除缓存
  • cache: 布尔值, 指定文件要不要缓存
  • showErrors:布尔值,将错误信息写入HTML页面
  • meta: {} 值是对象,设置元信息
meta:{viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}

xhtml

一个布尔值,默认值是 false ,如果为 true ,则以兼容 xhtml 的模式引用文件。

chunks

chunks主要用于多入口文件,当你有多个入口文件,那就回编译后生成多个打包后的文件,那么chunks 就能选择你要使用那些js文件

entry: {
  index: path.resolve(__dirname, './src/index.js'),
  devor: path.resolve(__dirname, './src/devor.js'),
  main: path.resolve(__dirname, './src/main.js')
}

plugins: [
  new httpWebpackPlugin({
    chunks: ['index','main']
  })
]

那么编译后:

<script type=text/javascript src="index.js"></script>
<script type=text/javascript src="main.js"></script>

如果你没有设置 chunks 选项,那么默认html 文件会引入所有的 entry 里面的js文件

excludeChunks Chunks作用是一样的,值也都是数组形式,对多入口js进行选择

排除掉一些js

excludeChunks: ['devor.js']
// 等价于上面的

xhtml

一个布尔值,默认值是 false ,如果为 true ,则以兼容 xhtml 的模式引用文件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 #Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 #Javascript
Vue.js 十五分钟入门图文教程
Sep 12 #Javascript
Vue通过ref父子组件拿值方法
Sep 12 #Javascript
webpack4 升级迁移的实现
Sep 12 #Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 #Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 #Javascript
You might like
提升PHP速度全攻略
2006/10/09 PHP
如何用php获取文件名后缀
2013/06/09 PHP
php批量上传的实现代码
2013/06/09 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
YII中assets的使用示例
2014/07/31 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
JavaScript 序列化对象实现代码
2009/12/18 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
PyQt5每天必学之工具提示功能
2018/04/19 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python 如何区分return和yield
2020/09/22 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
数控专业应届生求职信
2013/11/27 职场文书
师范生见习自我总结
2015/06/23 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
python获取带有返回值的多线程
2022/05/02 Python