# 10. 配置多个 HTML 文件 之前我们只写了一个 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> ``` ![](https://box.kancloud.cn/a76f30a8cf5d49ababc1fb482cacd03d_798x222.png) ![](https://box.kancloud.cn/322f3c15e648c159c70d09ffba245aad_1356x163.png) 有个问题,**`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') ``` 结果: ![](https://box.kancloud.cn/f08a8937c6815f9c3abc262230cb461f_922x254.png) ![](https://box.kancloud.cn/385f09e043513de451266f411b329ff6_1188x172.png) 这样就 OK 了。 先说这么多。