webpack学习三

1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。

第一步：初始化参数：获取配置文件和命令行中的参数进行融合。

第二步：编译阶段：

• 将初始化后的参数传入创建好的compiler对象，给compiler挂载配置文件中的plugin。
• 通过nodeEnvironmentPlugin使compiler具有文件读写能力。
• 给compiler挂载默认插件，执行compiler的run方法。并找到编译入口文件。
• 根据入口文件生成一个chunk。
• 根据main chunk构建所有的依赖模块。
• 生成chunk assets资源列表。
• 合并chunk assets

第三步：完成输出:根据配置的路径和文件名，将文件写入指定路径

2、Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。

loader:是文件加载器，可以对特定类型的文件进行编译、压缩、转换等处理。loader的执行顺序从后往前执行的。第一个执行的loader接收源文件内容作为参数，其他的loader接收前一个loader的返回值作为参数。

​ plugin：是webpack运行周期中在对应节点执行比如资源管理，目录清除等操作的。

​ 区别：loader只是对特定的文件进行转换。而plugin是基于事件机制工作，监听webpack执行打包中的节点，执行任务。丰富了webpack本身。

Loader 开发思路：

• module.exports导出一个函数。
• 这个函数接收source作为参数。
• 该函数返回在函数体内处理后的资源。

Plugin开发思路：

• 定义一个类
• 这个类中有一个apply方法
• apply接收compiler作为参数
• 在compiler的钩子上注册监听，通过webpack提供的api获取资源做处理(compilation.assets)
• 再处理完后的资源返回(处理完以后再重新赋值给compilation.assets)。