webpack分包分析

对webpack略有了解的朋友都知道，通过给webpack指定入口文件和出口路径，webpack就能从入口文件开始，分析出模块之间的依赖关系，然后将它们打包在一起，本文主要分析webpack的打包结构，了解和验证webpack的分包规则。

规则一

在默认配置下，每个入口page和依赖的模块都会打包成独立的bundle。

image.png

规则二

当模块不是静态引用，而是被动态引用的时候，会被分割成一个单独的chunk

image.png

规则三

通过配置splitChunk，可以指定webpack如何分包。规则二是splitChunk的默认配置导致的结果。该配置的用法网上已经有非常详细的解答：https://juejin.im/post/5b99b9cd6fb9a05cff32007a

bundle和chunk组合工作原理

被打包为chunk的模块，在bundle中改为通过该模块对应chunk的chunkId来引用，

chunkId和chunk内容储存在全局数组webpackJsonp中，每个bundle会读取webpackJsonp数组中的内容，以把chunkId作为moduleId的方式，将chunk的内容引入进来，作为modules的一部分，重新参加到模块引用的逻辑中来。

webapckJsonp作为一个全局变量，显然会产生变量冲突的问题。

当一个以webpack打包的工程引入了其他webpack打包的基础库的时候，如果业务工程和基础库都做了分包操作，都会使用webpackJsonp这个数组。同时，因为是两个单独的webpack打包，不可避免的会使用相同的chunkId。即webpackJsonp和chunkId都会产生冲突，造成代码紊乱。因此，基础库一定有设置output.libraryName值，这时候，webpack会使用webpackJsonp${output.libraryName}来存放chunk。