本文共 1350 字，大约阅读时间需要 4 分钟。

webpack 打包出来的各个bundle.js的由来和组成：

一。webpack4.0 使用SplitChunksPlugin来进行拆分，SplitChunksPlugin有三种模式async，all，initial

    默认情况下为async,我们什么都不设置看到的打包,就是按async来的,async模式下只从动态加载的模块里面进行拆分，例如main.js 文件为入口文件  里面引入了jquery，打包的时候不会将jquery文件拆分出来，XXX.vue为模块，XXX.vue中import jquery  那么就会打包拆分出一个新的bundle.js,如果入口文件和.vue文件都动态引入了，那么也不会拆分出来，因为默认的已经打包到了main.js中，默认的拆分原则：

    1.webpack 默认情况下对代码进行了分包，入口文件依赖的文件被打包进了main.js（包括node_modules的引入）     2.大于30Kb的第三方包被单独打包成独立的bundle,异步加载的页面也被打包成独立的bundle     3.每个bundle都包括node_modules和src下的代码,每次改动都会重新打包重新下载

module.exports = {  //...  optimization: {    splitChunks: {      chunks: 'async', //三选一："initial" 初始化，"all"(默认就是all)，"async"（动态加载）       minSize: 30000,  // 形成一个新代码块最小的体积,只有 >= minSize 的bundle会被拆分出来      maxSize: 0, //拆分之前最大的数值，默认为0，即不做限制      minChunks: 1, //引入次数，如果为2 那么一个资源最少被引用两次才可以被拆分出来      maxAsyncRequests: 5,// 按需加载的最大并行请求数      maxInitialRequests: 3, // 一个入口最大并行请求数      automaticNameDelimiter: '~', // 文件名的连接符      name: true,      cacheGroups: {        vendors: {          test: /[\\/]node_modules[\\/]/,          priority: -10        },        default: {          minChunks: 2,          priority: -20,          reuseExistingChunk: true        }      }    }  }};

二： initial 模式下，会将入口文件中的依赖包重新切割为一个新的文件,其它文件中动态引入的不会进行拆分，和async有点相反。这里为什么会产生vendors呢，就是因为默认的缓存组node_moudle

再观察发现vue文件引入的jquery ，没有独立出来，是在对应的js中的：

三：all 模式下，入口文件和动态引入文件都会进行打包：

转载地址：http://waurf.baihongyu.com/