重置CSS hash值

因业务反馈说，系统更新后，需要清除缓存。故需要修改output设置，总共需要修改两个文件

webpack.base.js webpack.prod.js

在文末有解释修改原理

打开webpack.base.js

output: {
	path: config.build.assetsRoot,
	// filename:  '[name].js', //原来的
	filename:  '[name].[hash:16].js', //此处 
	publicPath:  process.env.NODE_ENV ===  'production'  ?
	config.build.assetsPublicPath :
	config.dev.assetsPublicPath
},

打开webpack.prod.js,修改两处 第一处

output: {
	path: config.build.assetsRoot,
	//filename: utils.assetsPath('js/[name].[chunkhash].js'),//原来的
	//chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')//原来的
	filename: utils.assetsPath('js/[name].[hash:16].js'),//此处
	chunkFilename: utils.assetsPath('js/[id].[hash:16].js')//此处
},

第二处

new ExtractTextPlugin({
    //filename: utils.assetsPath('css/[name].[contenthash].css'),//原来的
	filename: utils.assetsPath('css/[name].[hash:16].css'),//此处
	allChunks: false,
}),

原理

hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器上拉取对应数据，进而更新本地缓存。但是在实际使用的时候，这几种hash计算还是有一定区别。

hash

hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值

contenthash

即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，那么不会重复构建。

chunkhash

采用hash计算的话，每一次构建后生成的哈希值都不一样，即使文件内容压根没有改变。这样子是没办法实现缓存效果，我们需要换另一种哈希值计算方式，即chunkhash。

chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。

老版本的是修改了该文件才会动态修改文件的哈希名称 新版本为每次打开都动态生成16位新的哈希名称，避免业务员需要手动清除缓存

查看配置的解释来说，contenthash||chunkhash配置是没问题的，但是实际使用中，还是需要清除缓存，所以直接修改为 hash 强制每次重新生成！