单页面下的基本配置
webpack.config.js
var htmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
entry:{
main:'./src/script/main.js',
a:'./src/script/a.js',
},
output:{
path:'/Users/flyme/Documents/web/learn/learn_webpack/webpack-demo/dist',
filename:'js/[name]-[chunkhash].js',
publicPath:'http://cdn.com/'//引入js的默认路径，上线时很又用
},
plugins:[
new htmlWebpackPlugin({//有两个属性files和optios
template:'index.html',//将script标签引入到index.html中
//filename:'index-[hash].html',//生成的html文件的名字,若是这样写每次更新都会根据hash重新生成这个html 文件
filename:'index.html',
inject:'head',//script标签被嵌入到哪里,
title:'hello,i am title',//在html的title标签中使用ejs的写法引入<%= htmlWebpackPlugin.options.title %>
minify:{//对当前生成的html文件进行压缩
removeComments:true,//删除注释
collapseWhitespace:true//删除空格
}
})
]
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="<%=htmlWebpackPlugin.files.chunks.main.entry%>"></script>
</head>
<body>
<% for(var key in htmlWebpackPlugin.files){%>
<%= key%>:<%= htmlWebpackPlugin.files[key]%>
<%}%>
我是分割线
<% for(var key in htmlWebpackPlugin.options){%>
<%= key%>:<%= htmlWebpackPlugin.options[key]%>
<%}%>
<script src="<%=htmlWebpackPlugin.files.chunks.a.entry%>"></script>
</body>
</html>
多页面，生成多个html
plugins[]是数组形式，可以通过new很多个htmlWebpackPlugin对象来生成很多个html。
通过chunks或者excludechunks来制定需要加载的js
注意：
之前在html页面中有script标签中不能通过编码点的方式引入不是所有页面的chunk中共有的js文件，否则就会报错，即使注释掉也不行
var htmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
entry:{
main:'./src/script/main.js',
a:'./src/script/a.js',
b:'./src/script/b.js',
c:'./src/script/c.js'
},
output:{
path:'/Users/flyme/Documents/web/learn/learn_webpack/webpack-demo/dist',
filename:'js/[name]-[chunkhash].js',
publicPath:'http://cdn.com/'//引入js的默认路径，上线时很有用
},
plugins:[
//多页面，好多个html
new htmlWebpackPlugin({
template:'index.html',
filename:'a.html',
inject:false,
title:'this is a.html',
//chunks:['main','a']//使用chunks一定注意了index.html中不能有script标签，注释掉都不行，会报错的
excludeChunks:['b','c']//不需引入的js
}),
new htmlWebpackPlugin({
template:'index.html',
filename:'b.html',
inject:false,
title:'this is b.html',
chunks:['b','main']//需要引入的js
}),
new htmlWebpackPlugin({
template:'index.html',
filename:'c.html',
inject:false,
title:'this is c.html',
chunks:['c','main']
})
]
}
若想通过提前加载一些js文件，减少固定请求，则需要在html模版中书写script标签，并在标签中导入默认加载的js文件（当然前提是所有页面的chunks里都得加载了此js文件，做的时候没有就一只报错，这是个坑），当然其他文件的应用就要排除这个默认引用的了，所以就把inject设置为false，使它不默认导入js，并在index.html模版中通过代码方式引入，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<script type='text/javascript'>
<%=
compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
</script>
</head>
<body>
<% for(var k in htmlWebpackPlugin.files.chunks){%>
<%if(k!=='main'){%>
<script src="<%= htmlWebpackPlugin.files.chunks[k].entry%>"></script>
<%}%>
<%}%>
</body>
</html>
