之前学习过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