复习webpack4之webpack与浏览器缓存

以前学习过webpack3的知识，可是webpack4升级后仍是有不少变更的，因此此次从新整理一下webpack4的知识点，方便之后复习。

此次学习webpack4不单单要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，好比打包原理等等，因此可能会省略一些比较基础的内容，可是但愿我能够经过这次学习掌握webpack，更好地应对之后的工做。

1.浏览器缓存

先新建一个js，里面的代码以下。

打包后的结果以下

此时，用户首次进入页面后，main.js和vendor.chunk.js会被浏览器缓存起来，这样用户第二次进页面，就不用从新下载js了，可是这样会形成一个问题，咱们没有加hash值，因此若是js发生变化，用户不强制刷新的话，代码时不会被更新的。

2.contenthash

咱们给output文件名加上contenthash，意思是若是文件内容发生变化，hash值才会改变。

打包后的文件也会加上hash值。

若是对应文件源代码没有改变，那么文件名称不会发生任何变化。可是一些老版本的webpack可能会发生没改变代码，可是hash值也发生变化的状况，这时候就要去加一个配置。在optimization中加一个runtimeChunk。

这样打包出会多一个runtime.js文件。

webpack在打包时，会把库和业务代码之间的关系作manifest，它既存在于业务代码(main.js)，也存在于库中(vendor.js)，在旧版webpack中，mainfest在每次打包的时候的时候可能会变化，因此contenthash值也会跟着变化。配置runtimeChunk后，会把manifest提取到runtime中，这样打包就不会影响到其余js了。