module.exports = {
entry: {
max: './script/max.js',
wyq:'./script/wyq.js',
a:'./script/a.js',
b:'./script/b.js'
},//入口文件
output: {
path: '../dist',//指定路径
filename: './js/[name]-[chunkhash].js',//文件名
publicPath: 'http://cdn.com/'
},//打包文件存放处
plugins: [
new htmlWebpackPlugin({
template:'index.html',
filename:'a.html',//指定文件名
inject:'head',//放在哪个标签内
title:'webpack is a',
chunks:['max','a']
}),
//多页面情况
new htmlWebpackPlugin({
template:'index.html',
filename:'b.html',//指定文件名
inject:'head',//放在哪个标签内
title:'webpack is b',
chunks:['wyq','b']//分别引入entry中的js
}),
] //生成的打包js与html相关联
}
除了chunks之外,excludeChunks也可以实现
让性能更好一些
在template指向下的index,html页面当中
<script type="text/javascript">
<%= htmlWebpackPlugin.files.chunks.hello.entry.substr(htmlWebpackPlugin.files.publicPath.length) %>
</script>
运行之后的结果
./js/hello-7ffc0665ce562b25b25f.js
如果
htmlWebpackPlugin.files.chunks.hello.entry
结果
http://cdn.com/./js/hello-7ffc0665ce562b25b25f.js
最后
<%=
compilation.assets[htmlWebpackPlugin.files.chunks.hello.entry.
substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
<% for(var k in htmlWebpackPlugin.files.chunks){%>
<% if(k !== 'hello'){%>
<script src="<%= htmlWebpackPlugin.files.chunks[k].entry %>">
</script>
<% } %>
<% } %>
网友评论