## 缓存 想象一下这个场景~ 我们网站上线了，用户第一次访问首页，下载了`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`删除掉了。