webpack学习笔记 (二) html-webpack-plugin使用
这个插件的两个作用：
为html文件中引入的外部资源如
script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个
html-webpack-plugin可以生成N个页面入口
安装使用如下：
一、首先安装html-webpack-plugin插件
在cmd中打开项目，输入cnpm install html-webpack-plugin；
二、在webpack-config.js的plugins里面添加 信息，如下图
然后在cmd中输入，webpack，即可以在项目文件夹下自动生成index.html。如果报错，则表示，未安装html-webpack-plugin插件。
注：不配置任何选项的html-webpack-plugin插件，他会默认将webpack中的entry配置所有入口thunk和extract-text-webpack-plugin抽取的css样式都插入到文件指定的位置。
三、多页面配置
对于生成多页面的情况，在plugins配置多个plugin即可
plugins:[
new webpack.BannerPlugin('测试webpack搭建 '),
new HtmlWebpackPlugin(),
new HtmlWebpackPlugin({
title:'测试webpack',
template: 'src/template/index.html', // 源模板文件
filename: './index1.html', // 输出文件【注意：这里的根路径是module.exports.output.path】
showErrors: true,
inject: 'body',
chunks: ["index"],
favicon:"./src/fav.ico",
hash:true,
minify:{
caseSensitive: false, //是否大小写敏感
removeComments:true, // 去除注释
removeEmptyAttributes:true, // 去除空属性
collapseWhitespace: true //是否去除空格
}
}),
new HtmlWebpackPlugin({
title:'测试webpack',
template: 'src/template/index.html', // 源模板文件
filename: './index2.html', // 输出文件【注意：这里的根路径是module.exports.output.path】
showErrors: true,
inject: 'body'
})
]
多页面配置
四、使用template模板页面
增加模板页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
</head>
<body>
<!-- 测试 -->
<div id="app" style=""></div>
</body>
<script type="text/babel">
</script>
</html>
模板页面
在配置中配置模板页面
五、自定义增加的js文件
在配置文件中，chunks选项添加对应的内容即可。
对应的内容为entry中的属性。具体如下图
六、生成页面压缩
配置minify配置项，常用的几个配置见上图
七、其他配置项解释如下
title: 生成的HTML模板的title，如果模板中有设置title的名字，则会忽略这里的设置
filename: 生成的模板文件的名字
关于filename补充两点：
1、filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构的。
2、指定生成的html文件内容中的link和script路径是相对于生成目录下的，写路径的时候请写生成目录下的相对路径。template: 模板来源文件
关于template补充几点：
1、template配置项在html文件使用
file-loader时，其所指定的位置找不到，导致生成的html文件内容不是期望的内容。
2、为template指定的模板文件没有指定任何loader的话，默认使用ejs-loader。如template: './index.html'，若没有为.html指定任何loader就使用ejs-loaderinject: 引入模块的注入位置；取值有true/false/body/head；true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
- true或者body：所有JavaScript资源插入到body元素的底部
2、head: 所有JavaScript资源插入到head元素中
3、false： 所有静态资源css和JavaScript都不会注入到模板文件中 favicon: 指定页面图标；
minify: {} | false , 传递 html-minifier 选项给 minify 输出。是
html-webpack-plugin中集成的html-minifier，生成模板文件压缩配置，有很多配置项，可以查看详细文档caseSensitive: false, //是否大小写敏感
collapseBooleanAttributes: true, //是否简写boolean格式的属性如：disabled="disabled" 简写为disabled
collapseWhitespace: true //是否去除空格
hash: 是否生成hash添加在引入文件地址的末尾，类似于我们常用的时间戳，比如最终引入是：
<script type="text/javascript" src="bundle.049424f7d7ea5fa50656.js?049424f7d7ea5fa50656"></script>。这个可以避免缓存带来的麻烦cache: 是否需要缓存，如果填写true，则文件只有在改变时才会重新生成
showErrors: 是否将错误信息写在页面里，默认true，出现错误信息则会包裹在一个
pre标签内添加到页面上chunks: 引入的模块，这里指定的是entry中设置多个js时，在这里指定引入的js，如果不设置则默认全部引入
chunksSortMode: 引入模块的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
excludeChunks: 排除的模块
xhtml: 生成的模板文档中标签是否自动关闭，针对xhtml的语法，会要求标签都关闭，默认false
八、插件事件（引用位置）
不知道你发现没有，html-webpack-plugin插件在插入静态资源时存在一些问题：
- 在插入js资源只能插入head或者body元素中，不能一些插入head中，另一些插入body中
- 不支持在html中文件内联*，例如在文件的某个地方用
<script src="xxx.js?__inline"></script>来内联外部脚本
为此，有人专门给插件作者提问了这个问题；对此插件作者提供了插件事件，允许其他插件来改变html文件内容。具体的事件如下：
Async（异步事件）:
* html-webpack-plugin-before-html-generation
* html-webpack-plugin-before-html-processing
* html-webpack-plugin-alter-asset-tags
* html-webpack-plugin-after-html-processing
* html-webpack-plugin-after-emitSync（同步事件）:
* html-webpack-plugin-alter-chunks这些事件是提供给其他插件使用的，用于改变html的内容。因此，要用这些事件需要提供一个webpack插件。例如下面定义的MyPlugin插件。
function MyPlugin(options) {
// Configure your plugin with options...
}
MyPlugin.prototype.apply = function(compiler) {
// ...
compiler.plugin('compilation', function(compilation) {
console.log('The compiler is starting a new compilation...');
compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
htmlPluginData.html += 'The magic footer';
callback(null, htmlPluginData);
});
});
};
module.exports = MyPlugin;然后，在webpack.config.js文件中配置Myplugin信息：
plugins: [
new MyPlugin({options: ''})
]注：一个比较全的配置
var webpack=require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'eval-source-map', // 还不知有什么用
entry: {
index:"./src/js/runoob1.js",
main:"./src/js/runoob1.js"
},
output: {
path: __dirname+"/build/web/", //通过HtmlWebpackPlugin插件生成的html文件存放在这个目录下面
filename: "../js/[name].js" //编译生成的js文件存放到根目录下面的js目录下面,如果js目录不存在则自动创建，相对于path
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
plugins:[
new webpack.BannerPlugin('测试webpack搭建 '),
new HtmlWebpackPlugin(),
new HtmlWebpackPlugin({
title:'测试webpack',
template: 'src/template/index.html', // 源模板文件
filename: './index1.html', // 输出文件【注意：这里的根路径是module.exports.output.path】
showErrors: true,
inject: 'body',
chunks: ["index"],
favicon:"./src/fav.ico",
hash:true,
minify:{
caseSensitive: false, //是否大小写敏感
removeComments:true, // 去除注释
removeEmptyAttributes:true, // 去除空属性
collapseWhitespace: true //是否去除空格
}
}),
new HtmlWebpackPlugin({
title:'测试webpack',
template: 'src/template/index.html', // 源模板文件
filename: './index2.html', // 输出文件【注意：这里的根路径是module.exports.output.path】
showErrors: true,
inject: 'body'
})
]
};
完整配置
webpack学习笔记 (二) html-webpack-plugin使用的更多相关文章
- webpack学习笔记二
sourceMap 源代码与打包后的代码的映射关系.例如,在某个源文件中test.js里面有个错误,如果开启状态,那么打包后运行的报错信息就会说明是错误的具体位置,如果是关闭状态,报错后,提示的报错位 ...
- webpack 学习笔记 01 使用webpack的原因
本系列文章实际上就是官网文档的翻译加上自己实践过程中的理解. 伴随着websites演化至web apps的过程,有三个现象是很明显的: 页面中有越来越多的Js. 客户端能做的事情越来越多. 越来越少 ...
- webpack学习笔记——sourcemap(使用webpack打包的项目如何调试代码)
[webpack]devtool里的7种SourceMap模式是什么鬼? 里面详细介绍了7种模式的区别,和建议使用. webpack sourcemap 选项多种模式的一些解释 两篇文章大同小异,第一 ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Java IO学习笔记二
Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
随机推荐
- MATLAB绘制函数图
序言 Matlab可以根据用户给出的数据绘制相应的函数图.对于单个2D函数图,需要给出一个行向量x作为函数图上离散点集的横坐标,以及一个与x列数一样的横坐标y作为函数图上点集的纵坐标. 向量x和y的取 ...
- Linux给MySQL创建用户，并分配权限
//登录MYSQL 使用root账号登录 @>mysql -u root -p @>密码 //创建用户 mysql> insert into mysql.user(Host,User ...
- GAITC 2019全球人工智能技术大会（南京）
2019年5月25日至26日,由中国人工智能学会主办,以“交叉.融合.相生.共赢”为主题的2019GAITC将在南京全新亮相. 2019 全球人工智能技术大会(2019 GAITC)以“前端引领.深度 ...
- 用php实现表格
<?php $contact2 =[ ['江苏'=>['华罗庚','河南','童第周']], ['河南'=>['童第周','华罗庚','河南']], ['河北'=>['刘恒', ...
- css 快捷修改 checkbox 及 radio的背景图
在CSS内选择要修改的input input[type=checkbox]:disabled{ //input类型等于复选框并且是disabled状态的所有(根据情况自由指定) -webkit-app ...
- 水管工游戏——dfs
问题描述: 水管工游戏是指如下图中的矩阵中,一共有两种管道,一个是直的,一个是弯的,所有管道都可以自由旋转,最终就是要连通入水口可出水口.其中的树为障碍物. 方案: 输入格式:输入的第一行为两个整数N ...
- 易爆物D305
分析:典型的并查集,每一个物品合一看成一个独立的顶点,则一个简单化合物就是一条边,如果两个顶点x,y联通则说明有危险,所以可以用一个并查集来维护图的联通分量集合,并查集的详解有一篇写的很易懂的博客并查 ...
- Python 上下文管理协议中的__enter__和__exit__基本理解
所谓上下文管理协议,就是咱们打开文件时常用的一种方法:with __enter__(self):当with开始运行的时候触发此方法的运行 __exit__(self, exc_type, exc_va ...
- LP-KPN
LP-KPN 网络结构 网络解析 1. 网络结构中绿色星星标志 公式.其实就是用预测出来的核在原图片经过Laplacian pyramid decomposes 后的图片上进行卷积运算.所以应该使用p ...
- Ant构建原理及build.xml文档描述
最近在改写jmeter,用到ant构建,记录一下. Ant的概念Make命令是一个项目管理工具,而Ant所实现功能与此类似.像make,gnumake和nmake这些编译工具都有一定的缺陷,但是Ant ...