之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。
这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作。
这一节会深入理解webpack原理
1.模块分析
我们这一次会实现一个类似webpack的工具,首先来写模块分析部分。
代码地址:
先把目录搭好,src下有三个js文件,每个文件里面对应以下内容:
word.js
message.js
index.js
现在这个代码在浏览器中是没有办法运行的,需要借助类似webpack这种工具才可以,所以我们需要借助node.js实现一个打包工具。
和src同级,我们新建一个bundler.js。
创建一个函数,用来分析打包入口文件,支持传入一个参数(文件路径),然后利用node读取文件内容。
而index中引用了message.js,我们需要把引用的文件名提取出来,要借助@babel/parser分析我们的源代码。
cnpm install @babel/parser --save
复制代码
@babel/parser提供了一个parse方法,第一个参数传入文件内容,第二个参数传一个对象。
方法返回的对象是一个抽象语法树(AST)。
对象里面有一个program.body,内容是这样的:
第一个Node的type是ImportDeclaration,意思是引入声明语句,我们index.js中第一行确实是引入语句。第二个Node的type是ExpressionStatement,意思是表达式语句,我们第二行写的console.log(),确实是表达式语句。所以借助这个工具,我们就可以分析文件之间的依赖关系。
为了找出所有的依赖关系,我们要遍历所有type是ImportDeclaration的语句,自己写会比较麻烦,还可以借助@babel/traverse
cnpm install --save @babel/traverse
复制代码
traverse是一个函数,第一个参数接受抽象语法树,第二个参数是一个对象。
抽象语法树中有元素的type是ImportDeclaration时,就会执行ImportDeclaration函数,它接受的参数可以解构出一个node,它就是所有type是ImportDeclaration的元素,就是我们所有的依赖,里面哟一个source,value值就是文件名,所以我们就可以把所有文件名都存起来
声明一个数组,把所有node中的soure.value都push到数组中。
这样入口分析就已经分析好了,但是这时候分析的依赖都是相对路径,我们要把它改为绝对路径,或者是相对于根路径的相对路径,这样才不会有问题,所以要借助node中的path。
但是我们为了方便以后开发,现在应该把绝对路径和相对路径都存好,所以把原先的数组变成对象,用以下方法存起来。
对象的key是相对路径,value是绝对路径。
然后就返回入口文件名,和文件所有依赖的内容。
但是我们用的ES Module引入文件,浏览器无法识别这个语法,就要依赖@babel/core。
cnpm install --save @babel/core
复制代码
@babel/core提供了一个方法,transformFromAst,可以把抽象语法树转化成浏览器可以运行的代码。
传入的参数中还可以配置ES6转ES5的插件,所以要先安装一下@babel/preset-env。
cnpm install --save @babel/preset-env
复制代码
函数会返回一个对象,里面有一个code属性,code属性中就是我们浏览器可以运行的代码。
最后返回我们分析的结果。
返回的结果意思是:入口文件是index.js;引用的依赖是message.js,地址是src/message.js;浏览器中可以运行的代码是code中的内容。
2.依赖图谱
我们现在只分析了入口文件的依赖,接下来我们要开始分析其他依赖,从message开始,一层一层把所有依赖都分析完。
我们再创建一个函数,用来制作依赖图谱,利用类似递归的方式,调用moduleAnalyser逐层分析依赖内容,并把它们都放到一个数组中。
最后生成的数组。
然后我们把它整合成一个对象,用路径作为key,依赖和代码作为value,并且返回这个对象。
对象的内容。
3.生成代码
拿到依赖图谱,现在要开始生成浏览器可以运行的代码了。
先看生成的代码中,存在require和exports两个方法,但是浏览器中没有这两个方法,所以我们要先定义这两个方法,然后把生成的代码片段利用闭包的形式执行。
require函数中,通过传入路径拿到对应的代码,利用eval()执行,如果require中有依赖,继续执行require时拿到的就是相对路径,需要转成绝对路径,直接去我们之前创建的对象中取就可以。
exports是一个空对象即可,这样导出的内容会被存到exports中。
然后把生成的代码格式化一下,复制到浏览器中执行。
就打印出say hello了。
这样,我们就已经实现了一个简易的webpack打包工具了,具体代码可以去我的github仓库里面看。
参考
从基础到实战 手把手带你掌握新版Webpack4.0 ----DellLee转载于:https://juejin.im/post/5d00fbbb5188255e780b64b1