mini-webpack
mini-webpack copied to clipboard
lizuncong
手写webpack主流程源码以及webpack常见loader、plugin源码
> 建议边看文章边动手实践以加强理解 ## loader 和 plugin 的区别 两者的区别可以从下面几点分析： - 概念 - 用法 - 执行顺序 - 如何开发 loader 和 plugin - 源码层面 ### 概念上 引用 webpack 官网 关于 [loader](https://webpack.js.org/concepts/#loaders) 和 [plugin](https://webpack.js.org/concepts/#plugins)...
### 源码调试 - 新建debugger.js文件，文件名称可以自定义。引入node_modules/webpack/bin/webpack，使用debug模式运行debugger.js即可 ### mini-pack目录 这个目录下的代码就是手写的webpack主流程源码。对应的webpack版本为4.46.0，webpack-cli版本为3.3.12。 直接在控制台运行 `node ./mini-pack/cli` 即可。 注意，mini-pack中的源码只是webpack主流程的源码，webpack源码本身除了`架构设计`复杂外，还有`业务层面`更加复杂。主流程源码只是针对简单的 打包场景进行处理，如果遇到打包出错的情况，那么也毫不意外。 一般来说，梳理清楚webpack主流程后，基本上对webpack整体架构都会有个清晰的认识。剩下的就是业务复杂度。如果仅仅是对源码感兴趣，大可不必 深究webpack自身的业务。举个例子，在我手写的过程中，我只是使用了 `index.js`，`test.js`，`a.js`这三个简单的文件进行打包，在真实的webpack 业务中，光是模块解析，即`require('./test.js')`，为了解析 `test.js` 文件的位置，就已经很复杂了。webpack将解析模块的代码单独封装成一个工具包， 即`enhanced-resolve`。 ### loaders目录 loaders目录里面都是各种手写loader，目前手写的 loader 有： - babel-loader - file-loader -...