webpack打包的3种hash值详解

webpack中的三种hash分别是：

• hash：全局hash
• chunkhash：分组hash
• contenthash：内容hash

实践讲解

事先准备

准备三个文件：

• main.js

<span style="color:#374151"><span style="background-color:#ffffff"><span style="background-color:#4a4a4a"><span style="color:#f8f8d4">import './main.css'

console.log('我是main.js')
</span></span></span></span>

• console.js

<span style="color:#374151"><span style="background-color:#ffffff"><span style="background-color:#4a4a4a"><span style="color:#f8f8d4">console.log('我是console.js')
</span></span></span></span>

• main.css

<span style="color:#374151"><span style="background-color:#ffffff"><span style="background-color:#4a4a4a"><span style="color:#f8f8d4">.title {
  color: #000;
}
</span></span></span></span>

打包环境搭建

打包环境的搭建我就不在这里详细讲了，想看的之后我会出一篇文章专门讲解。这里我就抽取精华部分。

• webpack.config.js

<span style="color:#374151"><span style="background-color:#ffffff"><span style="background-color:#4a4a4a"><span style="color:#f8f8d4">// 多入口打包
entry: {
    main: './src/main.js',
    console: './src/console.js'
  },
// 输出配置
output: {
    path: path.resolve(__dirname, './dist'),
    // 这里预设为hash
    filename: 'js/[name].[hash].js',
    clean: true
  },
plugins: [
      // 打包css文件的配置
      new MiniCssExtractPlugin({
      // 这里预设为hash
      filename: 'styles/[name].[hash].css'
    })
]
</span></span></span></span>

hash

由于我们预设的是hash，所以我们直接运行打包npm run build，我们看看我们打包后的是什么东西

可以看到，所有文件的文件名hash值都是一致的，那我们现在改一下main.css这个文件

<span style="color:#374151"><span style="background-color:#ffffff"><span style="background-color:#4a4a4a"><span style="color:#f8f8d4">.title {
  // #000 改成 #fff
  color: #fff;
}
</span></span></span></span>

然后我们再运行npm run build打包，看看打包后的是什么东西：

可以看出，修改一个文件，所有文件的hash值跟着变

结论：牵一发动全身，只改了一个main.css，会导致打包后所有文件的hash值都改变。所以当打包名称设置为hash时，整个项目文件是一致的，修改其中一个会导致所有跟着一起改。

chunkhash

我们把输出文件名规则修改为chunkhash：

<span style="color:#374151"><span style="background-color:#ffffff"><span style="background-color:#4a4a4a"><span style="color:#f8f8d4">entry: {
    main: './src/main.js',
    console: './src/console.js'
  },
output: {
    path: path.resolve(__dirname, './dist'),
    // 修改为 chunkhash
修改    filename: 'js/[name].[chunkhash].js',
    clean: true
  },
plugins: [
      new MiniCssExtractPlugin({
      // 修改为 chunkhash
修改      filename: 'styles/[name].[chunkhash].css'
    })
]
</span></span></span></span>

此时我们运行npm run build看看，打包后的东西：

我们可以看出，hash值会根据入口文件的不同而分出两个阵营：

• main.js、main.css一个阵营，都属于main.js入口文件
• console.js一个阵营，属于console.js入口文件

那我们现在照样修改一下main.css：网址:yii666.com<

<span style="color:#374151"><span style="background-color:#ffffff"><span style="background-color:#4a4a4a"><span style="color:#f8f8d4">.title {
  // 从 #fff 改为 pink
  color: pink;
}
</span></span></span></span>

重新运行npm run build打包看看：网址:yii666.com

可以看出，main.css修改后会影响main.css、main.js的hash值

结论：当规则为chunkhash时，打包后的hash值会根据入口文件的不用而不一样，当某个入口文件修改后重新打包，会导致本入口文件关联的所有文件的hash值都修改，但是不会影响到其他入口文件的hash值

contenthash

我们把输出文件名规则修改为contenthash：

<span style="color:#374151"><span style="background-color:#ffffff"><span style="background-color:#4a4a4a"><span style="color:#f8f8d4">entry: {
    main: './src/main.js',
    console: './src/console.js'
  },
output: {
    path: path.resolve(__dirname, './dist'),
    // 修改为 contenthash
修改    filename: 'js/[name].[contenthash].js',
    clean: true
  },
plugins: [
      new MiniCssExtractPlugin({
      // 修改为 contenthash
修改      filename: 'styles/[name].[contenthash].css'
    })
]
</span></span></span></span>

运行npm run build打包，看看打包后的文件长什么样子：文章来源地址https://www.yii666.com/blog/294171.html

可以看到，每个文件的hash值都不一样，每个文件的hash值都是根据自身的内容去生成的，那我们现在修改一下main.css：

<span style="color:#374151"><span style="background-color:#ffffff"><span style="background-color:#4a4a4a"><span style="color:#f8f8d4">.title {
  // pink 修改为 blue
  color: blue;
}
</span></span></span></span>

重新打包看看：

可以看出，main.css修改后只会影响main.css得hash值，也就是自己的hash值

结论：当规则为contenthash时，每个文件的hash值都是根据自身内容而生成，当某个文件内容修改时，打包后只会修改其本身的hash值，不会影响其他文件的hash值