之前我們只寫了一個(gè) html 文件，就是 src/index.html茂装，但是有時(shí)候我們是需要多個(gè)的坯汤，這個(gè)時(shí)候虐唠，怎么辦呢？
之前我們是這么做的惰聂，用了 html-webpack-plugin 這個(gè)插件來輸出 html 文件疆偿。
另放 html-webpack-plugin 參數(shù)介紹文章：https://segmentfault.com/a/1190000007294861
webpack.config.js
...
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
},
hash: true,
})
...
之前怎么做，現(xiàn)在還是怎么做搓幌，我們復(fù)制一下杆故，改個(gè)名字不就好嗎？
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact</title>
</head>
<body>
<p>Contact page</p>
</body>
</html>
有個(gè)問題溉愁，contact.html 使用的 js 和 css 跟 index.html 是一模一樣的
如果我要讓 contact.html 使用跟 index.html 不同的 js处铛，如何做呢？（只要保證 js 不同，css 也會(huì)不同的撤蟆，因?yàn)?css 也是由 js 里 import 的嘛)
那我們來改造一下：
...
module.exports = {
entry: {
"app.bundle": './src/index.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')
結(jié)果：
放一篇有興趣可以看看：
如何使用 pug (jade) 作為 HTML 的模板
