## hash 1. 结合 CDN 缓存使用 2. 文件名称 + md5 3. 跟整个项目的构建相关，只要项目中有文件更改，那个构建的hash值也会更改 4. 全部的文件共用相同的hash值 ``` var extractTextPlugin = require('extract-text-webpack-plugin'),  path = require('path')   module.exports = {  context : path.join(__dirname,'src'),  entry:{  main: './index.js',  vender:['./jquery.js','./test.js']  },  module:{  rules:[{   test:/\.css$/,   use: extractTextPlugin.extract({   fallback:'style-loader',   use:'css-loader'   })  }]  },  output:{  path:path.join(__dirname, '/dist/js'),  filename: 'bundle.[name].[hash].js',  },  plugins:[   new extractTextPlugin('../css/bundle.[name].[hash].css')  ] } ``` 执行结果如下：  ### 缺点 * 文件内容并没有实质性的改变，但是hash会变 * 缓存效果有问题 ## chunkHash 1. 根据入口文件进行计算的 2. 公共库和程序入口文件分开打包时，公共库的chunkhash不会变 ``` var path = require(``'path'``) module.exports = { ... output:{ path:path.join(__dirname, `'/dist/js'`), filename: `'bundle.[name].[chunkhash].js'`, }, } ``` 执行结果如下： 1. index.css被index.js引用了，所以共用相同的chunkhash值 2. 公共库由于是不同的模块，所以有单独的chunkhash  ### 存在的问题： 1. 如果 a 文件被 b 文件引用，他们是公用一个chunkhash的，如果 b 文件代码修改后，a 文件就算没有任何修改，也是会重新构建的。 ## contentHash - 内容hash 使用contentHash 可以解决上述的问题，在 a 文件内容没有变更时，就不会对 a 文件进行重新构建 ### 使用extra-text-webpack-plugin里的contenthash值 ``` var extractTextPlugin = require(`'extract-text-webpack-plugin'`), path = require(``'path'``) module.exports = { ... output:{ path:path.join(__dirname, `'/dist/js'`), filename: `'bundle.[name].[chunkhash].js'`, }, plugins:[ new extractTextPlugin('../css/bundle.[name].[contenthash].css') ] } ``` 执行结果：  ``` rules: [{ test: /\.(png|jpg|gif)$/, use: [{ loader: 'file-loader', options: { // name: '[name]_[hash].[ext]' // 按道理是当前项目的hash值. // name: '[name]_[chunkhash].[ext]' //Path variable [chunkhash] not implemented in this context: 282-8_[chunkhash].jpg name: '[name]_[contenthash].[ext]' // 根据文件的内容,生成的hash } }] }] ```