10. 配置多個 HTML 文件 · webpack 3 零基礎入門教程

# 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 了。先說這么多。