webpack基础(六) 文件指纹策略

• 什么是文件指纹
  文件指纹指打包之后输出文件名称的后缀
• 有哪些指纹策略，分别代表什么意思
  指纹文件策略一共有三种，hash、chunkhash、contenthash
• hash 策略：和整个项目相关，只要项目文件改变，整个项目构建的hash值都会改变
• chunkhash: 和webpack打包的chunk有关，不同的entry会生成不同的chunkhash
• contenthash:根据文件内容来定义hash，文件内容不变，则contenthash不变

测试不同的指纹策略

hash策略

1. 配置hash,已css js为例为例子。在webpack中配置hash

  output: {
        filename: "[name][hash:8].js",
        path: path.resolve(__dirname, "./dist")
    },

css

  new MiniCssExtractPlugin({
            filename: "css/[name][hash:8].css"
        }),

2. 打包结果

   
   image.png

3. 在css 随便修改一下，重新打包.打包结果

   
   image.png

• 总结
  hash策略只要文件改变，那么所有的文件都会发生改变。也就是重新打包

chunkhash策略

chunkhash策略是和chunk相关，因此需要在配置文件配置多入口

1. 配置chunkhash,已css,js为例子
   js 配置

   entry: {
        index:"./src/index.js",
        a:"./src/a.js"
    },
    output: {
        filename: "[name]-[chunkhash:8].js",
        path: path.resolve(__dirname, "./dist")
    },

css配置

  new MiniCssExtractPlugin({
            filename: "css/[name][chunkhash:8].css"
        }),

2. 指定结果

   
   image.png
3. 修改a入口的入口文件（js）文件

image.png

4. 发现修改a入口的文件,index入口不会改变

5. 修改index入口中的css文件

   
   image.png
   

   6.发现index文件中的index.js和css文件都发生改变

• 总结：
  chunkhash策略只和想对用的chunk相关，一个chunk的改变并不会对其他chunk文件进行重新打包。也就是所谓的关联文件

contenthash策略

1. 配置conetnthash

 output: {
        filename: "[name]-[contenthash:8].js",
        path: path.resolve(__dirname, "./dist")
    },

   new MiniCssExtractPlugin({
            filename: "css/[name][contenthash:8].css"
        }),

2. 执行结果

   
   image.png
   

   3.修改css文件:发现css文件名称改变 js文件不改变

   
   image.png

• 总结;
  contenthash只已自己的文件为单位，并不影响其他文件的打包

常用配置(个人习惯)

个人喜欢把js文件配置成contenthash,把css文件配置成chunkhash。这样能保证更改js文件的时候，都会改变，如果只修改css,让它不影响js文件