10天彻底搞定webpack4.0-笔记(2)

手写 webpack

bin

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

1
2
3
4
5
6
7
8
9
10
// 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文件。

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

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

1
npm link my_package

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

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

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

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

###loader 组成
loader 在分为 pitch 和 normal
pitch无返回值
pitch有返回值

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

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

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

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

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

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

文章作者: wenmu
文章链接: http://blog.wangpengpeng.site/2020/01/09/10%E5%A4%A9%E5%BD%BB%E5%BA%95%E6%90%9E%E5%AE%9Awebpack4-0-%E7%AC%94%E8%AE%B0-2/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 温木的博客
微信打赏