假如我们同时引入了lodash和jquery
image.png
然后运行打包npm run build,这个时候会报一个文件过大的警告
image.png
出现警告的原因是因为同时引入两个库，打包生成的文件会比较大，超过了要求的
244kb
image.png
其实这个警告并不影响我们代码的运行，怎么去掉这个警告呢？ 在
webpack.common.js里加一个配置项就行了,这个配置项作用就是不让webpack提示我们性能上的一些问题
image.png
之后运行打包就没有警告了，但是生成的打包文件名字太长了
image.png
此时我想打包出来的
lodash和jquery存放的文件名是我指定的，比如vendors.chunks.js该怎么配置呢？
image.png
然后再打包，就会生成我们想要的文件名
image.png
实际上，当我们打包之后，生成的dist目录下的这几个文件，应该是交给后端放到服务器上，服务器上就可以运行这些文件。
假设，我们已经把代码放到了服务器上运行了
image.png
那么它的整个加载过程是这样的：
- 首先访问页面(index.html),然后页面会去请求两个JS文件，
- 当用户第一次访问的时候，这两个JS文件是肯定会被请求的。
- 但是当用户第二次刷新页面的时候，这两个文件实际上已经被保存在了浏览器里面，所以第二次访问页面的时候浏览器会直接去拿缓存了。
问题来了，当用户第一次访问过之后，还没有进行第二个访问的时候，我们修改了源代码，并打包后新生成的文件，上传到了服务器，这样当用户刷新的时候，他看到的是原来的老的内容呢？ 还是我们修改过的新的内容呢？
- 实际上，如果用户是普通刷新(而不是强制刷新),他拿到的还是我们之前展示的老的内容。
-
因为，就算是我们修改了内容，但是我们打包生成的新的文件，还是原来的文件名。还是下边这几个名字
image.png - 那么用户再请求页面的时候，浏览器发现这两个文件，本地已经有缓存了，就直接从缓存拿就行了，就不会用新上传到服务器的文件了。这就是产生问题。
为了解决用户浏览器上，缓存文件的问题，我们可以引入一个概念叫做content hash
- 我们对代码做个变更，我们把
webpack.common.js里的output部分配置拿出来放到webpack.dev.js里
image.png
image.png - 因为开发环境下，我们不用去关注用户缓存的问题，每次我都单独打包然后刷新或者热模块更新，都会帮我们解决这个更新的问题。毕竟是开发环境。
- 上线的时候的配置也要改下，这里的
contenthash也是和name一样的占位符
image.png - 如果我们的源代码没有改变，那么打包生成的
contenthash永远都不会变。因为它是根据content产生的一个hash字符串。content不变hash字符串就不变。 - 我们来验证一下，先看下我们此时
index.js里的代码
image.png -
然后我们运行打包
image.png - 然后我们修改下
index.js的值
image.png -
然后再打包
image.png - 我们就会发现，我们的逻辑代码打包生成的文件的文件名里的
hash值变了。而我们引入的lodash和jquery库因为没有变化，生成的文件的文件名里的hash值也就没有变化。 - 所以，如果我们对源代码做了变更，并且上传到服务器，当用户再访问的时候，因为页面要请求的JS文件的文件名跟原来的不一样，浏览器就不会去拿缓存了，就需要重新请求我们上传的新的JS文件了。而vendos这个文件因为文件名没有变更，浏览器就会直接去缓存里拿
contenthash就是webpack去解决浏览器caching的方法
有的时候，如果我们是用的老一点的webpack4版本的时候会发现，即便我们没有去改变源代码，但是两次打包的时候，有可能contenthash也是不同的，这个时候需要我们额外的去做一个配置
image.png
- 当然了新版本webpack这样配置也是没有问题的。
-
运行打包的时候，会多出一个runtime文件
image.png - 实际上，当我们在做
webpack打包的时候，main.js放置的是我们的业务逻辑，vendors.js放置的是我们的库，但是我们的业务逻辑和我们的库之间，也是有关联的，这个关联逻辑处理内置的代码叫做manifest,默认manifest是既存在于main.js里，也存在于vendors.js里边的，manifest每次打包的时候，在旧版的webpack中可能会有差异，正是因为它的差异导致了每次打包的时候，虽然我们没有改变源代码，但是main和vendors里的代码也都跟着改变了，这就是为什么老版本的webpack，即便我们没有去改变源代码，两次打包的contenthash也发生变化了。 - 当我们配置了
runtimeChunk,就把manifest这一块关系相关的代码抽离出来，单独放到了runtime这样一个文件里面去，这样的话，main.js里就放业务逻辑，vendors.js里就放我们的库，而他们之间的关系代码都放到runtime文件里去，这样，在老版本里，无论我们怎么打包，main对应的contenthash和vendors对应的contenthash都不会发生变化了。因为他们两个里边不会有manifest的代码了。
