webpack 3中hash、chunkhash和contenthash三者的区别

在使用webpack 3中，文件名的hash值可以有三种hash生成方式，那具体使用哪一种呢？
1.hash
如果都使用hash的话，所有文件的hash都是一样的，而且每次修改任何一个文件，所有文件名的hash值都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。

output:{
     path:path.resolve(__dirname,'./dist'),
     publicPath: '/dist/',
     filename: '[name]-[hash].js'
 }

2.chunkhash
既然hash的用法有这种缺陷，那是否有更好的办法，使只有被修改了的文件的文件名hash值修改呢？答案就是使用chunkhash。

output:{
     path:path.resolve(__dirname,'./dist'),
     publicPath: '/dist/',
     filename: '[name]-[chunkhash].js'
 }

当然这样做还是有问题，就是如果我一个js文件里面引入了css文件。这时要是我修改了js，但没修改css，能否让css能够继续利用缓存呢？答案是可以！
首先，我们使用Extract-text-webpack-plugin插件将css文件从js中分离出来。

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: {
            loader:"css-loader",
            options:{
                minimize: true //css压缩
            }
        }
        
    })
},

然后设置css的plugin

 new ExtractTextPlugin({
      filename: 'css/[name]-[chunkhash].css',
  }),

3.contenthash
对css使用了chunkhash之后，我们测试会发现改变js文件，css文件名的hash值变化了，这样就导致我们的非覆盖发布css文件失效了。所以这里需要注意就是css文件必须使用contenthash。将上面的css插件配置改为如下：

new ExtractTextPlugin({
    filename: 'css/[name]-[contenthash].css',
}),