手写 webpack

bin

通常npm包都有一个或多个可执行文件需要被安装到环境变量PATH中。npm可以轻松做到这一点。
如何做呢？只需要在package.json文件中提供字段bin即可。字段bin是命令名对本地文件的一个映射。当安装的时候，npm会把可执行文件链接进(symlink)全局安装的prefix/bin目录或者本地安装的./node_modules/.bin/目录。官网对 bin 的讲解

// package.json
{
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
 "bin":{
      "custom_command":"./bin/filename.js"
  }
}

安装后，通过npx custom_command就能执行filename.js文件。

npm link

把本地自己开发的包 symlink 到全局包安装路径中，具体可看文章npm link 介绍
以及安装的相关介绍npm install 讲解

结合 bin 和 link 进行包开发

假设我们现在正在开发一个自己的包(A)。
bin 指定了包 A 的可执行文件，link 命令把包(A)symlink 到全局环境中。
现在我们要在 demo 中测试一下包 A。可以在 demo 中安装，使用如下命令

npm link my_package

然后就可以通过npx my_package运行包 A

###AST
ast 是抽象语法树。
AST 抽象语法树的讲解

webpack 打包是通过 ast 来进行解析和修改文件。从而实现打包的目的。

###loader 开发
loader 其实就是一个方法（其实是废话，js 中连类都没有，只能是方法啊），读取项目中文件内容，根据 loader 中配置的规则进行转换。

###loader 组成
loader 在分为 pitch 和 normal

###plugin 开发
plugin 其实就是 webpack 上的钩子，

laoder 是对项目中的每个文件进行转换、处理的，把文件转换成 javascript 模块。plugin 是对整个项目打包过程进行处理的。

loader 加载顺序，是从右向左，从下往上，但是配置了优先级，优先级如下：

pre ==> normal ==> inline ==> post.

使用JSON.stringify(cssObj)可以取消换行不兼容问题

所有文件的依赖，都会被打包成 key/value 键值对，key 就是依赖文件的路径，value 是经过处理（打包）后生成的 js 方法，这个方法就是依赖文件要干的事情。