## 緩存
想象一下這個場景~
我們網站上線了，用戶第一次訪問首頁，下載了`home.js`，第二次訪問又下載了`home.js`~
這肯定不行呀，所以我們一般都會做一個緩存，用戶下載一次`home.js`后，第二次就不下載了。
有一天，我們更新了`home.js`，但是用戶不知道呀，用戶還是使用本地舊的`home.js`。出問題了~
怎么解決？每次代碼更新后，打包生成的名字不一樣。比如第一次叫`home.a.js`，第二次叫`home.b.js`。
文檔看[這里](https://doc.webpack-china.org/guides/caching)
我們照著文檔來
`webpack.dev.config.js`
~~~
output: {
path: path.join(__dirname, './dist'),
filename: '[name].[hash].js',
chunkFilename: '[name].[chunkhash].js'
}
~~~
這樣每次打包都會自動加上`hash`~
現在我們試試，是不是修改了文件，打包后相應的文件名字就變啦？~
但是你會發現問題又來了，報錯了，因為我們的`dist/index.html`里面引用的`js`文件都是寫死的，怎么樣才能把它配置成動態生成的`js`文件名呢？
## HtmlWebpackPlugin
這個插件，每次會自動把`js`插入到你的模板`index.html`里面去。
`npm install html-webpack-plugin --save-dev`
刪掉`index.html`里面寫死的路徑和文件名并把文件復制到`src`目錄里面，并修改`webpack.dev.config.js`，增加`plugin`
~~~
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 定義webpack插件
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, 'src/index.html')
})
]
~~~
這樣就可以了。。。休息一下欣賞下自己做的東西~~~
說明一下：`npm start`打包后的文件存在內存中，你看不到的~ 你可以把遺留`dist/index.html`刪除掉了。
