- branch draft-webpack-v0.1 —— webpack 的基础
- branch draft-webpack-v0.2 —— webpack.config.js 的基本配置
- branch draft-webpack-v0.3 —— html-webpack-plugin 的基本使用
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './main.js',
a: './src/script/a.js',
b: './src/script/b.js',
c: './src/script/c.js'
}, // 入口文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name]-[chunkhash].js',
publicPath: 'http://gulu.top/' // 上线前配置
},
plugins: [
new htmlWebpackPlugin({
template: 'index.html',
filename: 'index.html',
title: '入口 index',
}),
new htmlWebpackPlugin({
template: 'index.html',
title: '入口 a',
filename: 'a.html',
})
]
}以上 webpack.config.js 配置可生成 a.html/index.html 两个 html 文件 title 不同
var htmlWebpackPlugin = require('html-webpack-plugin')
{
...
plugins: [
new htmlWebpackPlugin({
template: 'index.html',
filename: 'index.html',
title: '入口 index',
excludeChunks: ['a','c'],
minify: {
whitespace: false
}
}),
new htmlWebpackPlugin({
template: 'index.html',
title: '入口 a',
filename: 'a.html',
chunks: ['main','c'],
minify: {
whitespace: false
}
})
]
}<% for(var key in htmlWebpackPlugin){ %>
<%= key%>
<% } %>
tags files options
<% for(var key in htmlWebpackPlugin.files){ %>
<%= key%>
<% } %>
publicPath js css manifest favicon
- head 加载所有模板都要使用的 js 脚本，减少链接请请求数
<head>
<script type="text/javascript">
<%= compilation.assets[htmlWebpackPlugin.files.js.filter(item => item.indexOf('js/main-') !== -1)[0].substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
</script>
</head>- body 动态加载其余需要加载的 js 脚本
<% for (var i=0; i<htmlWebpackPlugin.files.js.length; i++){%>
<% if(htmlWebpackPlugin.files.js[i].indexOf('js/main-') === -1) {%>
<script src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
<%} %>
<%}%>
注意：如果main.js为多数或所有模板头部静态引用的脚本，webpack.config.js中实例html-webpack-plugin时 参数 chunks 中必须包含main，否则 html 模板中使用 htmlWebpackPlugin.files.js 中取不到 main.js 的压缩文件，如下配置
{
...
plugins: [
new htmlWebpackPlugin({
template: 'index.html',
filename: 'index.html',
title: '入口 index',
inject: false,
chunks: ['main','a','b','c']
}),
new htmlWebpackPlugin({
template: 'index.html',
title: '入口 a',
filename: 'a.html',
inject: false,
excludeChunks: ['b']
})
]
}