[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
[js高手之路]深入浅出webpack教程系列索引目录：
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
上文我们讲到了options的配置和获取数据的方式，本文，我们继续深入options的配置
一、html-webpack-plugin插件中的options除了自己定义了一些基本配置外，我们是可以任意的添加自定义的数据
webpack.dev.config.js文件:
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : {
main : './src/js/main.js',
calc : './src/js/calc.js'
},
output : {
//__dirname，就是当前webpack.config.js文件所在的绝对路径
path : __dirname + '/dist', //输出路径，要用绝对路径
filename : 'js/[name]-[hash].bundle.js' //打包之后输出的文件名
},
plugins: [
new HtmlWebpackPlugin({
template : './index.html',
title : 'ghostwu教你学webpack',
inject : true,
date : new Date(),
userName : 'ghostwu',
age : 22
})
]
};
我们在webpack.dev.config.js中新增了3个自定义数据( date,userName, age)，我们在demo2目录下面的index.html模板中可以这样读取
<h3><%= htmlWebpackPlugin.options.date %></h3>
<h3><%= htmlWebpackPlugin.options.userName %></h3>
<h3><%= htmlWebpackPlugin.options.age %></h3>
同样设置好了之后，记得( npm run d )重新打包生成.
二、完整的把htmlWebpackPlugin这个实例在模板中遍历出来
demo2下面的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><%= htmlWebpackPlugin.options.title %></title>
<body>
<h3><%= htmlWebpackPlugin.options.date %></h3>
<h3><%= htmlWebpackPlugin.options.userName %></h3>
<h3><%= htmlWebpackPlugin.options.age %></h3>
<ul>
<% for ( var key in htmlWebpackPlugin ){ %>
<% if ( key == 'files' ) { %>
<h3>files</h3>
<% for( var f in htmlWebpackPlugin[key] ){ %>
<li> <%= f %>, <%= htmlWebpackPlugin[key][f] %> </li>
<% if ( f == 'chunks') { %>
<p><%= JSON.stringify( htmlWebpackPlugin[key][f] ) %></p>
<% } %>
<% } %>
<% } else { %>
<h3>options</h3>
<% for( var f in htmlWebpackPlugin[key] ){ %>
<li> <%= f %>, <%= htmlWebpackPlugin[key][f] %> </li>
<% } %>
<% } %>
<% } %>
</ul>
</body>
</html>
三，通过上面打印的数据，我们可以自己手动指定js文件的引入，不需要自动inject
webpack.dev.config.js文件
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : {
main : './src/js/main.js',
calc : './src/js/calc.js'
},
output : {
//__dirname，就是当前webpack.config.js文件所在的绝对路径
path : __dirname + '/dist', //输出路径，要用绝对路径
filename : 'js/[name]-[hash].bundle.js' //打包之后输出的文件名
},
plugins: [
new HtmlWebpackPlugin({
template : './index.html',
title : 'ghostwu教你学webpack',
inject : false
})
]
};
inject设置为false, js不会自动注入到打包之后的文件dist/index.html，所以我们就要自动指定加载的js文件.
demo2/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><%= htmlWebpackPlugin.options.title %></title>
<script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
<body>
<script src="<%= htmlWebpackPlugin.files.chunks.calc.entry %>"></script>
</body>
</html>
执行打包命令( npm run d ),在dist目录下生成的index.html文件，源代码就变成我们手动注入的js文件了
四、minify选项，压缩html文件
他可以配置很多的值，官方参考地址：https://github.com/kangax/html-minifier#options-quick-reference
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : {
main : './src/js/main.js',
calc : './src/js/calc.js'
},
output : {
//__dirname，就是当前webpack.config.js文件所在的绝对路径
path : __dirname + '/dist', //输出路径，要用绝对路径
filename : 'js/[name]-[hash].bundle.js', //打包之后输出的文件名
},
plugins: [
new HtmlWebpackPlugin({
template : './index.html',
title : 'ghostwu教你学webpack',
inject : false,
minify : {
removeComments : true, //去掉注释
collapseWhitespace : true, //去掉空行
}
})
]
};
这里，我们配置了两种常用的压缩选项( 去掉注释，去掉空行），那么打包生成的index.html文件，就会变成压缩版（比如你看到的jquery.min.js这样的文件，都是经过压缩处理的）
[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)的更多相关文章
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在we ...
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease ...
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解
接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...
随机推荐
- Excel 一键上传到数据库
<a class="edit" id="batchImport"> 批量导入 </a> js代码弹窗: $("#bat ...
- Struts2总结优化登录与转发_02
优化登录: 使用Struts2中的标签时,会生成大量的tr.td等,决定不使用Struts2中的标签,改用EL表达式,表单有大量数据时,不适合在控制层编写,所以用实体类封装URL中的参数. 控制层代码 ...
- Wamp之mysql密码故事
注:有时候修改mysql密码会出现如下状况:密码改了,但新密码就是进不进去. 原因大概是语法错误.例如: >update user set password='hooray' where use ...
- iOS底层学习-KVC使用实践以及实现原理
简介 KVC(Key-value coding)键值编码,顾名思义.额,简单来说,是可以通过对象属性名称(Key)直接给属性值(value)编码(coding)"编码"可以理解为& ...
- POJ 1308 Is It A Tree? 解题报告
Is It A Tree? Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 32052 Accepted: 10876 D ...
- Unicode、UTF－8 和 ISO8859-1到底有什么区别
说明:本文转载于新浪博客,旨在方便知识总结.原文地址:http://blog.sina.com.cn/s/blog_673c81990100t1lc.html 本文主要包括以下几个方面:编码基本知识, ...
- angularJS实战（一）
angular实现列表 accessCtrl.js let AccessCtrl = function($scope, AlertService, DialogService, BigDataServ ...
- mysql常用的hint
--mysql常用的hint -------------------2014/06/26 对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法. ...
- Netty笔记——技术点汇总
目录 · Linux网络IO模型 · 文件描述符 · 阻塞IO模型 · 非阻塞IO模型 · IO复用模型 · 信号驱动IO模型 · 异步IO模型 · BIO编程 · 伪异步IO编程 · NIO编程 · ...
- js的dom操作和函数
dom是稳当对象模型,文档指标签文档,对象指文档中每个元素,模型指抽象画的东西. js常用函数 日期时间函数(需要用变量调用):var b = new Date(); //获取当前时间b.getTim ...