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文件名的hash值居然沒變化，這樣就導致我們的非覆蓋發布css文件失效了。所以這里需要注意就是css文件必須使用contenthash。將上面的css插件配置改為如下：
new ExtractTextPlugin({
    filename: 'css/[name]-[contenthash].css',
}),