您的位置：首页 > Web前端 > JavaScript

[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

2017-09-10 11:09 1676 查看

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这样的文件，都是经过压缩处理的）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航