webpack中的hash、chunkhash、contenthash应用

hash

全部打包出来的文件共用相同的hash值，只要项目里有文件更改，整个项目构建的hash值都会更改，重新打包

chunkhash

根据入口配置进行打包，在配置单独打包公共库的代码的时候使用，公共库的代码不经常更新，不需要每次重新打包

entry:  {
    
    
	main: 'xxx',
  	vender:['react','.xxx']
}

contenthash

根据文件内容为每个文件生成hash值，文件内容不变不会重新打包

babel-loder

@babel/preset-env会将ES6 Module转化为CommonJS的形式，这会导致Webpack中的tree-shaking特性失效。

module: {
    
    
  rules: [
    {
    
    
      test: /.js$/,
      exclude: /node_modules/,
      use: [
        {
    
    
          loader: 'babel-loader',
          options: {
    
    
            presets: [
              [
                'env', {
    
     modules: 'false' }
              ]
            ]
          }
        }
      ]
    }
  ]
}

HashedModuleIdsPlugin

由于webpack会为每个模块指定的id是按数字递增的，当有新的模块插入进来时就会导致其他模块的id也发生变化，进而影响了chunkhash的改变，造成资源重新打包。

// webpack 5 新添加的配置
plugins: [
  new webpack.ids.HashedModuleIdsPlugin()
]