webpak的chunk概念

[RachelRen]

webpak的chunk概念

webpack中的chunk算是基本概念之一，之前老是搞不清楚，而且很容易和entry搞混。在使用CommonsChunkPlugin这个插件后，最后生成的文件有app.js, vendor.js, manifest.js这些文件就是chunk。

entry 和 chunk 可以理解为一个入入口，一个出口

entry: {
    app: 'app/app.js',
    vendor: 'app/vendor.js',
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    names: ['vendor', 'manifest']
  })
]

webpack的chunk类型可以分为三种：

1. entry chunk 入口块
2. normal chunk 普通块
3. initial chunk 初始块

entry chunk 入口块

An entry chunk contains the runtime plus a bunch of modules

可以理解为包含runtime运行时的块可以称为entry chunk，一旦原本存在运行时（runtime）的entry chunk失去了运行时，这个块就会转而变成initial chunk。

normal chunk 普通块

A normal chunk contains no runtime. It only contains a bunch of modules.

普通块不包含运行时runtime，只包含一系列模块。但是在应用运行时，普通块可以动态的进行加载。通常会以jsonp的包装方式进行加载。而code splitting主要使用的就是普通块。

initial chunk 初始块

An initial chunk is a normal chunk.

官方对initial chunk的定义非常简单，初始块就是普通块，跟普通块相同的是同样不包含运行时runtime，不同的是初始块是计算在初始加载过程时间内的。在介绍入口块entry chunk的时候也介绍过，一旦入口块失去了运行时，就会变成初始块。这个转变经常由CommonsChunkPlugin插件实现。

没有使用CommonsChunkPlugin插件之前，两个entry分别被打包成两个chunk，而这两个chunk每个都包含了运行时，此时被称为entry chunk入口块。

而一旦使用了CommonsChunkPlugin插件，运行时runtime最终被转移到了manifest.js文件，此时最终打包生成的三个chunkapp.js 、 vendor.js 、 manifest.js，app.js、vendor.js失去了runtime就由入口块变成初始块。

看懂前端脚手架你需要这篇webpack