前端模块化开发规范的终结者Webpack详解(纯干货,不套路)

可谓集CommonJS、AMD、ES6等多种特性于一身,灵活、易用、高扩展性、性能优越。

核心配置

以下是webpack的几个核心配置节:

节点 说明
entry 指定要打包的文件
resolve 配置寻找模块的规则
module 配置处理模块的规则,项目里面的一切都是模块,一个文件就是一个模块
loader 各种加载器,用于代码转换
plugin 配置扩展插件,各种各样的插件,这也是其灵活性特色的一大体现
output 打包后文件的输出目录

处理流程

首先,webpack在启动后会从entity里配置的module开始,因为module之间都会存在多个依赖有关系,所以它会去递归解析entry依赖的所有module

然后,module会以entity为单位进行分组,一个entity及其所有依赖的module被分到一个组也就是一个chunk

最后,webpack会将所有 chunk转换成文件输出;

在整个流程中,webpack会在恰当的时机执行plugin里定义的逻辑。

猜你喜欢

转载自blog.csdn.net/lpw_cn/article/details/84928202