之前我们只写了一个 html 文件，就是 src/index.html，但是有时候我们是需要多个的，这个时候，怎么办呢？
之前我们是这么做的，用了 html-webpack-plugin 这个插件来输出 html 文件。
webpack.config.js
...new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html',minify: {collapseWhitespace: true,},hash: true,})...
之前怎么做，现在还是怎么做，我们复制一下，改个名字不就好吗？
webpack.config.js
new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html',minify: {collapseWhitespace: true,},hash: true,}),new HtmlWebpackPlugin({template: './src/contact.html',filename: 'contact.html',minify: {collapseWhitespace: true,},hash: true,})
src/contact.html
<html lang="en"><head><meta charset="UTF-8"><title>Contact</title></head><body><p>Contact page</p></body></html>
有个问题，contact.html 使用的 js 和 css 跟 index.html 是一模一样的
如果我要让 contact.html 使用跟 index.html 不同的 js，如何做呢？（只要保证 js 不同，css 也会不同的，因为 css 也是由 js 里 import 的嘛)
那我们来改造一下：
...module.exports = {entry: {"app.bundle": './src/app.js',// 这行是新增的。"contact": './src/contact.js'},...plugins: [new CleanWebpackPlugin(pathsToClean),new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html',minify: {collapseWhitespace: true,},hash: true,// 这行是新增的。excludeChunks: ['contact']}),new HtmlWebpackPlugin({template: './src/contact.html',filename: 'contact.html',minify: {collapseWhitespace: true,},hash: true,// 这行是新增的。chunks: ['contact']}),new ExtractTextPlugin('style.css')],...};
上面的 excludeChunks 指的是不包含， chunks 代表的是包含。
src/contact.js
console.log('hi from contact js')
结果：
