simple-webpack
实现一个简单的webpack
- 可以先看一下原生的webpack打包后的文件的输出。我们要做的也是通过自己的方式，实现类似webpack打包后的输出。
- 可以看到输出文件最终会读取一个对象。
modules: {
'filepath': code
}
其中filepath代表了文件的相对路径,code为对应文件的代码。而其中webpack打包后的结果将require替换成了__webpack__require__。
3. webpack的loader其实是个function，其中通过正则匹配文件，然后输出，顺序从下到上，从右到左。
4. webpack的pliguns是一个class，因为我们每次都要new xxplugin，而plugin涉及多个钩子，相应的compiler.hooks都是通过tapable这个库来做的。
实现方式
- 那么我们要做的就是把每个文件的
require替换成__webpack__require__。思路是通过fs读取对应路径的file，然后通过babelParse将file解析为AST,通过babel/traversal遍历AST找到require对应的节点，替换为__webpack__require__。然后通过bable/generator将AST生成对应的code。每访问一个文件递归的将require的文件添加到依赖，执行替换操作。 - 上一步将每个文件的
require替换，接下来我们要做的是读取的文件输出。我们通过ejs这个库构造好对应的模板，同时将对应的entry和modules传入，通过fs.writeFileSync将其输出到dist目录。那么我们也就完成了基本的打包。 - loader处理，由于loader本质是一个function，通过正则匹配文件，那么我们只需要将读取的文件即fs读取的文件作为入参传入到loader即可。
- plugins，本质是一个class，涉及到多个钩子，在不用的钩子节点可以进行处理。具体参考
plugins文件夹下的文件。
执行
yarn安装对应依赖。npm link将bin目录的命令会映射到对应的node的/bin目录下，然后可以执行此命令。simple-pack执行命令，查看输出。