关于前端:打包的3种hash值你知道吗当年我校招时被这题难倒了

大家好，我是林三心，用最通俗易懂的话讲最难的知识点 是我的座右铭，根底是进阶的前提 是我的初心

依稀记得，当年我加入了大厂的校招，面试的是 网易雷火工作室 ，过后有一道题，我记得很分明，就是： 说说 webpack 中三种 hash 配置的区别

哈哈，我过后连 webpack 都不太会配置，所以也答不进去，而后也。。。没有而后了。。

webpack 中的三种 hash 别离是：

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

筹备三个文件：

main.js

import './main.css'

console.log('我是 main.js')

console.js
```
console.log('我是 console.js')
```
main.css
```
.title {color: #000;}
```
打包环境搭建

打包环境的搭建我就不在这里具体讲了，想看的之后我会出一篇文章专门解说。这里我就抽取精髓局部。

webpack.config.js

// 多入口打包
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'
  })
]

因为咱们预设的是 hash ，所以咱们间接运行打包 npm run build ，咱们看看咱们打包后的是什么货色

能够看到，所有文件的文件名 hash 值都是统一的，那咱们当初改一下 main.css 这个文件

.title {
  // #000 改成 #fff
  color: #fff;
}

而后咱们再运行 npm run build 打包，看看打包后的是什么货色：

能够看出，批改一个文件，所有文件的 hash 值跟着变

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

咱们把输入文件名规定批改为 chunkhash ：

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'
    })
]

此时咱们运行 npm run build 看看，打包后的货色：

咱们能够看出，hash 值会依据 入口文件的不同 而分出两个营垒：

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

那咱们当初照样批改一下 main.css ：

.title {
  // 从 #fff 改为 pink
  color: pink;
}

从新运行 npm run build 打包看看：

能够看出， main.css 批改后会影响 main.css、main.js 的 hash 值

论断：当规定为 chunkhash 时，打包后的 hash 值会依据入口文件的不必而不一样，当某个入口文件批改后从新打包，会导致本入口文件关联的所有文件的 hash 值都批改，然而不会影响到其余入口文件的 hash 值

咱们把输入文件名规定批改为 chunkhash ：

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'
    })
]

运行 npm run build 打包，看看打包后的文件长什么样子：

能够看到，每个文件的 hash 值都不一样，每个文件的 hash 值都是依据本身的内容去生成的，那咱们当初批改一下 main.css ：

.title {
  // pink 批改为 blue
  color: blue;
}

从新打包看看：

能够看出， main.css 批改后只会影响 main.css 得 hash 值，也就是本人的 hash 值

论断：当规定为 contenthash 时，每个文件的 hash 值都是依据本身内容而生成，当某个文件内容批改时，打包后只会批改其自身的 hash 值，不会影响其余文件的 hash 值

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】

关于前端:打包的3种hash值你知道吗当年我校招时被这题难倒了

前言

当年的校招

哪三种？

实际解说

当时筹备

打包环境搭建

hash

chunkhash

contenthash

结语