持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情
背景
我们webpack项目构建成功后，会有这种一段描述信息：
里面的chunks是什么呢？
为什么是index和list,chunk又是什么呢？
为什么chunk name是也index和list呢？
下面我带着伙计们一块一探究竟。
准备
先看贴一下文件目录和页面代码:
src/index.js :
import {add} from './other.js' const json =require('./index.json') console.log(json,add(1,2)); console.log('哈哈'); src/other.js :
export function add(a,b){ return a+b } src/index.json:
{ "age": 18 } src/list.js:
console.log('我是list文件呀'); src/index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>Webpack项目</div> </body> </html> webpack.config.js:
const path = require("path"); module.exports = { // entry:'./src/other.js', entry: { index: './src/index.js', list: './src/list.js' }, output: { filename: "[name].js",//利用占位符，文件名不要重复 path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径 }, mode: 'development' } Chunk
是个代码片段，一个chunk可能由多个模块组合而成，也用于代码合并和分割。
比如 indes.js的整个代码需要编译就是一个chunk,里面有引入其他文件other.js,
other.js里面的代码是个代码片段也需要编译，所以，就一共2个chunk,
index.js再引入一个index.json文件，
同理，index.json文件也是个代码片段也是需要编译的，也会是一个chunk,
那么index.js里一共就3个chunk。
Chunks
顾名思义，就是chunk的一个集合，是chunk的总数，一个出口文件有1个chunks,而一个chunks至少有一个chunk，因为总归是要导出的
比如上面代码所示，最终构建层打包后，
dist/index.js是个出口文件，那么这个出口文件index.js包含一个chunks,这个chunks里面包含3个chunk,
同理 list.js也是个出口文件，它也包含1个chunks,而chunks里面又包含1个chunk。
一个出口文件bundle里只有一个chunks。
一个chunks至少包含一个模块，一个bundle包含一个chunks。
module和bundle
什么是module?
模块的意思，一个文件就是一个模块，
比如：打包文件dist里面的每个文件就是一个个模块module,index.html属于一个module,indes.js又是另外一个module，list.js同理也是一个独立的module,如果有其他文件，比如，a.js,b.js都是一个个单独的module。
什么是bundle
资源经过webpack流程解析编译后最终输出的成果文件，打包的产物，靠入口文件生成的js文件、webpack打包出来的文件，比如这个项目dist里面的出口文件index.js和 list.js。
解析一波
再看一下我们打包后的描述信息 ：
执行npm run test构建成功后，
控制台会出现这样一段信息，我们自上而下看：
有Hash这个是hash格式的标识，
然后是version版本信息，可看到webpack的版本信息是4.44.0,
再者就是Time，构建的总时间，65ms,
下面一行是构建的日期具体时间；
再下面，是出口文件，分别是index.js 和 list.js然后它两各自对应的出口文件大小，各自的chunks名和chunk名；
再往下，就是指出所有出口文件是哪些，index.js和 list.js；
继续往下，就是所有的chunk文件，一共有4个，以及他们所属的chunks是谁，可以看出，index.js、index.json、other.js这3个chunk属于chunks index里面的，
后面每个chunk的大括号里面都有标注出自己对应的chunks,
list.js是属于chunks list的。
可看出出口文件中index.js中有3个代码片段，
因为入口文件index.js里面引入了index.json和other.js加上它自己，所以就编译出3段代码片段，分别是index.js、index.json、other.js,从而就是3个chunk，
而一个出口文件有一个chunks,所以这里面的chunks有3个chunk。
再看一下出口文件list.js里面的：
dist/list.js:
只有一个代码片段，就是它自己list.js,
因为它里面没有引入任何文件，所以只导出自己，也只编译了自己的代码片段，
因此，出口文件list.js里的chunks包含1个chunk那就是index.js。
总结
- chunk：指代码块，⼀个 chunk 可能由多个模块组合⽽成，也⽤于代码合并与分割。
- chunks：就是chunk的一个集合，是chunk的总数，一个出口文件有1个chunks,而一个chunks至少有一个chunk，因为总归是要导出的。
- module:模块的意思，一个文件就是一个模块， 比如：打包文件dist里面的每个文件就是一个个模块module,index.html属于一个module,indes.js又是另外一个module，list.js同理也是一个独立的module,如果有其他文件，比如，a.js,b.js都是一个个单独的module。
- bundle:资源经过webpack流程解析编译后最终输出的成果文件，打包的产物，靠入口文件生成的js文件、webpack打包出来的文件。
- 一个chunks至少包含一个模块module，一个bundle包含一个chunks,一个chunks至少有一个chunk。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjyfx/16104.html