webpack 学习心得(一)

核心概念


Webpack有以下几个核心概念

  • Entry:入口,webpack执行构建的第一步将从 Entry 开始,可抽象成输入

  • Module:模块,在webpack里一切皆模块,一个模块对应一个文件。webpack会从配置的 Entry 开始递归找出所有依赖的模块。

  • Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。

  • Loader:模块转换器,用于将模块的原内容按照需求转换成新内容。

  • Plugin:扩展插件,在webpack构建流程中的特定时机注入扩展逻辑,来改变构建结果或做我们想要的事情。

  • Output:输出结果,在webpack经过一系列处理并得出最终想要的代码后输出结果。

    Webpack在启动后会从 Entry 里配置的 Module 开始,递归解析 Entry 依赖的所有 Module 。每找到一个 Module ,就会根据配置的 Loader 去找对应的转换规则,对 Module 进行转换后,再解析出当前 Module 依赖的 Module 。这些模块会以 Entry 为单位进行分组,一个 Entry 及其所有依赖的 Module 被分到一个组也就是一个 Chunk 。最后,Webpack会将所有 Chunk 转换成文件输出。在整个流程中,Webpack会在恰当的时机执行 Plugin 里定义的逻辑。
    在实际应用中我们可能会遇到各种奇怪、复杂的场景,不知道从哪开始。根据以上总结,我们已对Webpack有了一个整体认识,这能让我们在以后使用Webpack时快速知道应该通过配置什么去完成自己想要的功能,而不是无从下手。

摘自于:《深入浅出Webpack》—吴浩麟/著

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值