webpack配置中关于entry对象vendor属性的问题

（此仅为记录学习用，本文为转载文章，详细原文地址为：原文地址）

为什么要使用vendor属性？

一般情况下，使用此属性的目的是为了方便开发调试，或者是部署到服务器时提高应用的访问速度。在webpack 的打包此文件过程中通常会根据文件的内容计算出一个hash值，并将该值加到文件名中，并配置一个长达一年的缓存控制。之所以这么做，是因为vendor.js中的内容基本上很少更新，当我们根据业务需求修改相关逻辑代码并重新生成入口文件时（比如app.js），vendor.js仍然在浏览器的缓存中，这时用户只需要重新下载新的入口文件即可。

但是要实现以上的需求还需要webpack实现代码分割的配合，那么如何实现呢？

webpack实现代码分割的方法

要实现上面的需求，就需要将vendor中的代码抽离出来。官方文档上推荐使用CommonsChunkPlugin插件来抽离公共的代码块。但是在项目里实际使用中发现，每当我们更改了业务代码并重新进行项目构建生成入口文件（比如：app.js）时，vendor.js的hash值也会随之改变，上面提到的缓存策略也就失去了意义。

那为什么会出现vendor.js的hash值会改变的问题呢？

vendor.js的hash值改变的原因及解决方法
通过进一步的排查，我们得出：这个问题是由于webpack打包时，默认使用数字作为模块的id导致的。既然有问题的出现，肯定有解决问题的方法。

有两种方法可以解决此问题：1.使用NameModulesPlugin插件。2.使用HashedModuleldsPlugin插件

关于NameModulesPlugin插件的问题：顾名思义，它能将模块id由数字的形式改为字符串（文件的相对路径）的形式，但是采用这种方式打包生成的入口文件（比如：app.js）的大小相较于以前的打包方式体积增加了近一倍，即使采用gzip压缩之后体积也比之前有所增加。

因此推荐采用第二种方法。HashedModuleldsPlugin是webpack作者为webpack2.0版本开发的，发现它居然完整的解决了上面遇到的所有问题。在修改业务代码生成入口文件（比如：app.js）或者在入口文件添加新的模块，删除旧模块时，vendor.js的hash值不在随之改变，同时在入口文件里采用异步方式加载的chunk的hash值也不会再发生改变了。

作者：My_Life001
链接：原文地址
来源：简书