1. 創(chuàng)建 index.html
首先在 dist 目錄下創(chuàng)建 index.html 文件，其內(nèi)容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project</title>
</head>
<body>
<script src="app.bundle.js"></script>
</body>
</html>
這樣，你在服務(wù)器上把這個(gè) index.html 和 app.bundle.js 放到網(wǎng)站根目錄中，用 nginx 托管起來(lái)，就可以用了。
前端的項(xiàng)目不就是這樣處理的嗎？
但是，我一般不會(huì)這么做，我會(huì)用更好的方式來(lái)處理這個(gè)問(wèn)題。
為什么呢？
因?yàn)?index.html 文件太死了，連 js 文件都寫(xiě)死了，有時(shí)候引用的 js 文件是動(dòng)態(tài)變化的呢？
打個(gè)比方，類似下面這種例子：
<script src="app.bundle1.js"></script>
<script src="app.bundle2.js"></script>
<script src="app.bundle3.js"></script>
而且還不確定有多少個(gè)。
還有一種情況，有時(shí)候?yàn)榱烁玫?cache 處理，文件名還帶著 hash，例如下面這樣：
main.9046fe2bf8166cbe16d7.js
這個(gè) hash 是文件的 md5 值，隨著文件的內(nèi)容而變化，你總不能每變化一次，就改一下 index.html 文件吧？
效率太低！
下面我們要使用一個(gè) webpack 的插件 html-webpack-plugin 來(lái)更好的處理這個(gè)問(wèn)題。
2. html-webpack-plugin
webpack 吸引人的地方就是因?yàn)樗刑嗟牟寮袝r(shí)候一些需求，一個(gè)插件就搞定。
這么多插件，我們不可能全都學(xué)，全都用，要用也是找最好的，最常用的來(lái)玩，而且學(xué)了一個(gè)，其他的也差不多，掌握方法就好。
學(xué)習(xí)插件的第一步，是進(jìn)入其主頁(yè)，先把它的 readme 文檔看看，至少知道它是干什么的，能解決什么問(wèn)題，最后知道如何用就行了。
2.1 安裝
先來(lái)安裝，一條命令就好。
$ npm install html-webpack-plugin --save-dev
安裝成功后，package.json 這個(gè)文件會(huì)多出一行 "html-webpack-plugin": "^2.30.1",，如下所示：
{
"name": "hello-wepback",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack -d --watch",
"prod": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.8.1"
}
}
2.2 使用
現(xiàn)在我們把之前的 dist/index.html 先刪除掉，我們要用 html-webpack-plugin 這個(gè)插件來(lái)自動(dòng)生成它。
把 webpack.config.js 文件改一下，如下所示：
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
最后，運(yùn)行一下上文所說(shuō)的 npm run build 命令，你會(huì)發(fā)現(xiàn)在 dist 目錄生成了 index.html文件，打開(kāi)來(lái)看下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="app.bundle.js"></script></body>
</html>
連標(biāo)題 <title>Webpack App</title> 都自動(dòng)生成了，如果這是固定的話，就不太靈活，但是 html-webpack-plugin 有選項(xiàng)來(lái)處理這個(gè)問(wèn)題。
3. 更好的使用 html-webpack-plugin
要改變 title 很簡(jiǎn)單，上文提到 HtmlWebpackPlugin 這個(gè)方法可以傳入很多參數(shù)的，下面這樣就可以解決這個(gè)問(wèn)題。
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpackPlugin({
title: "hello world"
})]
};
再去看看新生成的 index.html 文件，是不是變化了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<script type="text/javascript" src="app.bundle.js"></script></body>
</html>
只是改變了一點(diǎn)點(diǎn)東西，其實(shí)也沒(méi)多大用處，有時(shí)候我們要讓 index.html 根據(jù)我們的意愿來(lái)生成。就是說(shuō)它的內(nèi)容是我們自己定的。
這個(gè)就不得不提到 html-webpack-plugin 的 template 功能。
把 webpack.config.js 更改如下：
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html',
})]
};
接著新建 src/index.html 文件，內(nèi)容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
</body>
</html>
我們?cè)賮?lái)看看新生成的 dist/index.html 文件，內(nèi)容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<script type="text/javascript" src="app.bundle.js"></script></body>
</html>
下面我再來(lái)介紹幾個(gè)參數(shù)，以及它的結(jié)果。
filename: 'index.html' 默認(rèn)情況下生成的 html 文件叫 index.html，但有時(shí)候你不想叫這個(gè)名字，可以改。
minify: {
collapseWhitespace: true,
},
這個(gè)可以把生成的 index.html 文件的內(nèi)容的沒(méi)用空格去掉，減少空間。
效果如下：
hash: true 為了更好的 cache，可以在文件名后加個(gè) hash。（這點(diǎn)不明白的先跳過(guò)）
效果如下：
最后的 webpack.config.js 內(nèi)容大約是下面這樣的：
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
},
hash: true,
})]
};
html-webpack-plugin 肯定還有更多的用法和選項(xiàng)，這個(gè)只能根據(jù)需要慢慢探究了。
