简答题

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

答： Webpack的构建流程主要有：相关插件工作、解析文件依赖并形成依赖树 、 加载器加载、编译转换相关文件 、 将加载器放入打包结果

Webpack打包过程如下：

• webpack解析配置中的插件，将相应的插件挂载到webpack对应环节的钩子上, 当到达相应环节时插件会自动触发工作
• webpack会根据配置将一个文件作为打包的入口（一般为js), 根据该入口文件的导入语句解析推断该文件所依赖的资源模块
• 然后去解析每个资源模块对应的依赖，最后形成的项目关系之间的依赖树
• 然后webpack会递归这个依赖树，找到每个节点所对应的资源文件
• 接着根据配置文件当中的rules属性去找到模块文件所对应的加载器，然后加载器加载该模块
• 最后将加载器的结果放入bundle.js即打包结果当中，从而实现整个项目的打包

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

答：两者的不同：Loader仅在加载环节工作，而Plugin通过钩子机制实现的，几乎在webpack每个环节都可以进行工作；Loader输出的结果必须是JS代码 ，Plugin本质上是一个函数或包含apply方法的对象，对返回结果没有要求。

开发Loader: 首先模块导出的内容是一个执行函数，该执行函数内部是对资源的处理过程。该执行函数的形参为输入内容，返回结果为加载内容/处理结果。值得注意的是，该返回结果会被直接插入到webpack工作文件中，因此返回结果必须是JS内容。

module.exports = source => {
    // source为文件内容
    
	// 处理过程
    
    // result必须是JS代码格式
    return result
}

开发Plugin: 首先定义一个类，在类当中定义一个apply方法，apply方法的参数为此次构建的所有配置信息，构建类的实例后apply方法在webpack启动时会自动调用。接着在这个apply方法中注册webpack相应节点的钩子函数, 在钩子函数中编写相关操作代码。

class Name {
    // compiler对象参数 webpack工作时最核心的对象 包含此次构建的所有配置信息   也是通过该对象去注册钩子函数
	apply (compiler) {
        
        // 注册webpack相应节点的钩子函数  具体钩子名称及时间参考官网
        // 若生成资源到 output 目录之前执行  则使用emit钩子 使用如下
        // 第一个参数为插件名称 第二个为挂载函数
        compiler.hooks.emit.tap('pluginName', compilation => {
            // compilation => 可以理解为此次打包的上下文
            
            // 相关操作代码
        })
    }
}