在使用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',
}),