webpack--缓存

缓存

1. babel 缓存：
   代码里面最多的就是js文件，标签结构或者样式文件较少（即使多也没办法处理）
   babel可以对我们写的代码进行编译处理，处理成浏览器可以识别的语法，即JS的兼容性处理。
   比如有100个js模块，其中有一个JS模块有变化修改，其他99个模块没有，那么不可能因为这一个JS 模块变化了，就把全部100个JS模块重新打包。
   这个时候开启babel缓存，先把100个JS模块缓存，第二次构建时，没有变化的JS模块就直接启用缓存。*

{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
options:{
 preset:['''
  ],
  //开启babel缓存
  //第二次构建时候，会读取之前的缓存
  cacheDirectory:true
 }
}

2. 文件资源缓存
   hash:每次webpack构建时会生成唯一的hash值.
   缺陷：因为js和css同时使用一个hash值.
   如果重新打包，会导致所有缓存失效。（可能只是改动一个文件）
   chunkhash:根据chunk生成的hash值。如果打包来源于同一个chunk,那么hash值就一样。
   缺陷：js和css的hash值还是一样的。因为css是在js中（index.js）被引入的，所以同属于一个chunk.
   contenthash:根据文件的内容生成hash值，不同文件hash值一定不一样。

output:{
样式文件的filename也可以这么设置
  filename:'js/built.[hash:10].js',
   //  可以根据需求改成[chunkhash:10]或者[contenthash:10]
  path:resolve(_dirname,'build')
}