webpack中 hash chunkhash

hash is typically used in conjunction with caching CDN, after passing through webpack constructed, corresponding to the file name automatically generated MD5 value corresponding to tape. If the contents of a file is changed, then the corresponding file hash value will also change, URL address corresponding HTML references will change, CDN server pulls the trigger corresponding data from the original server, and then update the local cache.

hash

hash is associated with the construction of the entire project, build file hash values ​​generated are the same, so the hash calculations are associated with the construction of the entire project, hash generated during the same building are the same, as long as there are project file changes , hash value of the entire project will be built to change.

If the outlet is hash, then once for a project to modify any file, will build the entire project, retrieve hash value, the purpose of the cache will fail.

chunkhash

Using the hash calculation, after each construct generated hash value is not the same, even if the contents of the file are fundamentally not changed. Like this is no way to implement caching effects, we need another hash value calculation method, namely chunkhash.

chunkhash and hash is not the same, it parses the file dependency depending on the file entry (the Entry), Construction of the corresponding chunk, generates a hash value of the corresponding. We separated in a production environment in a number of public libraries and program files entrance area, separate packaging to build, then we use chunkhash way to generate hash values, so long as we do not change the code public library, you can ensure that its hash value will not be affected .

Due chunkhash, so the item master file main.js inlet and corresponding dependencies since main.css is packaged in the same module, so share the same chunkhash, but because it is different common library module, so there is a separate chunkhash. This way ensures that as long as the content of the document has not changed will not be repeated when building constructed on the line

Configuration is as follows

output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    publicPath: publishPath.publishPath + publishPath.prefix +'/'
  },

 If you need to extract plus separate css file

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

　　

Add plug-in

const WebpackChunkHash = require('webpack-chunk-hash');

new webpack.HashedModuleIdsPlugin(),
    new WebpackChunkHash(),