1 webpack.config.js
const webpack = require('webpack'),
htmlWebpackPlugin = require('html-webpack-plugin'),
path = require('path');
module.exports = {
entry: {
main: './src/script/main.js',
a: './src/script/a.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-[chunkhash].js',
publicPath: 'http://cdn.com/' //path输出的时候的目录 publicPath理解为占位符，需要上线地址
},
plugins: [
new htmlWebpackPlugin({
//filename: 'index-[hash].html',
filename: 'index.html', //避免每次生成不同名的.html此时每次都会生成 index.html
template: 'index.html',
//inject: 'head',
inject: false,
title: 'webpack is good module pack',
date: new Date(),
minify: { //对当前的html文件进行压缩
removeComments: true, //删除注释
collapseWhitespace: true //删除空格
}
})
]
};
2 根目录 index.html
这里的.html同.ejs模板一样，可以使用js语法 <%= %> <% %> 、let in 、循环等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.main.entry %>"></script>
</head>
<body>
<%= htmlWebpackPlugin.options.date %>
<% for(let key in htmlWebpackPlugin) {%>
<%= key %>
<% } %>
<!--注释内容-->
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.a.entry %>"></script>
</body>
</html>
3 编译
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>webpack is good module pack</title><script type="text/javascript" src="http://cdn.com/js/main-723f6c1682e09396ec6f.js"></script></head><body>Wed Apr 05 2017 21:49:33 GMT+0800 (中国标准时间) files options<script type="text/javascript" src="http://cdn.com/js/a-28982e930ed9e24890a5.js"></script></body></html>
可以看到压缩、传参、 header body不同地方引入js、(线上)都以实现