• hashOn behalf ofcompilationthehashValue.compilationAny file changes in the project will be recreated and thenwebpackCalculate the newcompilationthehashValue.
  • chunkhashOn behalf ofchunkthehash, the module is regenerated only when it changeshash.
  • contenthashTo solve the changestyleThe file injsFile regenerationhashThe problem of usingextract-text-webpack-pluginSeparate compiled outputcssFile).

The example of vue – cli

Vue – cli scaffolding webpack build configuration file/webpack base. Conf. Js

In vue-CLI, hash is used for image, audio, video, and font files.

// hash(hash,jpg,mo4,txt){ test: /\.(png|jpe? g|gif|svg)(\? . *)? $/, loader:'url-loader',
options: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\? . *)? $/, loader:'url-loader',
options: {
    limit: 10000,
    name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2? |eot|ttf|otf)(\? . *)? $/, loader:'url-loader',
options: {
    limit: 10000,
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } }) { test: /\.(png|jpe? g|gif|svg)(\? . *)? $/, loader:'url-loader',
options: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\? . *)? $/, loader:'url-loader',
options: {
    limit: 10000,
    name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2? |eot|ttf|otf)(\? . *)? $/, loader:'url-loader',
options: {
    limit: 10000,
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}}Copy the code

Chunkhash is mainly used in JS files

AssetsPath (‘ js/[name].[chunkhash].js’), chunkFilename: Utils. AssetsPath (‘ js / [id]. [chunkhash] js’)

Note:

  1. chunkhashIt can only be used in production environments but not in development environments.
  2. Remove hot updates, don’t letwebpack.HotModuleReplacementPlugin()inpluginsIn the run,

    Hot update andjsthechunkhashThere are conflicts.

Contenthash: build/webpack. Prod. Conf. Js

Use extract-text-webpack-plugin to compile the output CSS file separately. Extract-text-webpack-plugin provides another hash value: contenthash

// extract css into its own file
new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')}),Copy the code