详解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 相关文章推荐
判断用户是否在线的代码
Mar 05 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
解决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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
php foreach 参数强制类型转换的问题
2010/12/10 PHP
基于php无限分类的深入理解
2013/06/02 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
php创建无限级树型菜单
2015/11/05 PHP
实例讲解PHP表单
2020/06/10 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
django 微信网页授权登陆的实现
2019/07/30 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
python代码xml转txt实例
2020/03/10 Python
Python中如何添加自定义模块
2020/06/09 Python
Python之字典添加元素的几种方法
2020/09/30 Python
Python解析微信dat文件的方法
2020/11/30 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
实习自荐信
2013/10/13 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
应届生找工作求职信
2014/06/24 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
二审代理词范文
2015/05/25 职场文书
婚宴父亲致辞
2015/07/27 职场文书
python tkinter实现定时关机
2021/04/21 Python