Common Chunks插件发出一个“chunkhash”，如果文件的内容已经更改，它将被更新。 当它们输出时，Webpack可以将这个哈希追加到文件名中：
output: {
filename: '[name].[chunkhash].js'
},当你这样做时，你会看到你输出的文件将具有像app.3b80b7c17398c31e4705.js这样的名称。
3.3 自动注入构建文件
当然，如果你添加一个哈希，你必须更新索引文件中的文件的引用，否则浏览器将不会知道它：
<script src="app.3b80b7c17398c31e4705.js"></script>这将是一个非常繁琐的工作，手动执行，所以使用HTML Webpack插件为你做。 该插件可以在捆绑过程中自动将构建文件的引用注入到HTML文件中。
首先删除对构建文件的引用：(index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test-6</title>
</head>
<body>
<div id="app"></div>
<!-- built files should go here, but will be auto injected -->
</body>
</html>并将HTML Webpack Plugin添加到Webpack config中：
new HtmlWebpackPlugin({
filename: 'index.html'
template: 'index.html',
inject: true,
chunksSortMode: 'dependency'
}),这样配置完成之后在index.html中就会自动引用构建的文件
4.代码分割
默认情况下，Webpack会将你的所有应用程序代码输出为一个大捆绑文件。 但是，如果你的应用程序有多个页面，则使用分割代码将更有效，
每个单独的页面代码都在单独的文件中，并且仅在需要时加载是更好的选择。
Webpack有一个名为“代码分割”的功能，正是这样。 在Vue.js中实现这一点也需要异步组件，并且通过Vue Router变得更加容易。
4.1 异步组件
异步组件不是将定义对象作为其第二个参数，而是具有解析定义对象的Promise函数，例如：
Vue.component('async-component', function (resolve, reject) {
setTimeout(() => {
resolve({
// Component definition including props, methods etc.
});
}, 1000)
})当组件实际需要呈现时，Vue将只调用该函数。 它还将缓存未来重新渲染的结果。
如果我们构建我们的应用程序，因此每个“页面”都是一个组件，并且我们将定义存储在我们的服务器上，那么我们就是中断实现代码分割的途径。
