当前位置： 移动技术网 > IT编程>开发语言>JavaScript > webpack的源代码分析：从入口到构建出一个文件

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

2020年07月09日  | 移动技术网IT编程  | 我要评论

源代码入口

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方法，应用具体插件功能

本文地址：https://blog.csdn.net/wxid2798226/article/details/107169382

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网