详解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 相关文章推荐
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
php提高网站效率的技巧
2015/09/29 PHP
php短信接口代码
2016/05/13 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
php语法检查的方法总结
2019/01/21 PHP
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
js闭包用法实例详解
2016/12/13 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python提取频域特征知识点浅析
2019/03/04 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python用for循环求和的方法总结
2019/07/08 Python
python中有函数重载吗
2020/05/28 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
上市公司董事长岗位职责
2015/04/16 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript