webpack的源代码分析:从入口到构建出一个文件

源代码入口

1. 我们调用yarn run react:build调用的是webpack的命令

具体命令在这个路径~/workspace/mep-ui-sso/node_modules/.bin

2. cat webpack, 这个命令本身是个快捷方式,

在这里插入图片描述
里面调用了npm的webpack包的入口js,

var localWebpack = require.resolve(path.join(process.cwd(), "node_modules", "webpack", "bin", "webpack.js"));

其中最终实例化出的对象是
在这里插入图片描述
所以一个疑问是js如何获取路径?
require包
requirejs中可以使用相对路径和绝对路径,绝对路径需要注意的是使用需要添加上.js后缀 https://www.jianshu.com/p/c112e2d21521
因为是用快捷方式,所以说得通,所有相对路径都是包中的路径


最终实例化

项目文件夹: node_modules/webpack/lib/webpack.js
在这里插入图片描述
从定义看webpack就是个compiler
里面最主要是Compiler 继承了Tapable是个架构,插件架构,发布订阅
在这里插入图片描述
Compilation
在这里插入图片描述
比如插件的运行,插件必须有一个apply方法,当插件被hook到tapable的框架时,回调apply方法,应用具体插件功能

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值