关于前端:打包的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

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

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

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

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

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

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

chunkhash

咱们把输入文件名规定批改为 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 值

contenthash

咱们把输入文件名规定批改为 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 值

结语

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