Webpack基本

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

前言：

    webpack构建运行在 node.js环境下，它的配置文件遵循CommonJS规范，

     webpack.config.js 导出一个object对象

webpack打包流程如下：

1: 初始化参数：

       根据用户在命令窗口输入的参数 和 webpack.config.js 文件配置的参数，

形成最后的配置结果

2: 开始编译：

       通过前面得到的最终配置初始化得到一个compiler对象，并加载我们需要的的所有loader，注册所有的插件 plugins，插件开始监听 webpack 构建过程的生命周期的环节（事件），不同的环节会有相应的处理，然后开始执行compiler的run方法来执行编译过程，

3: 确定入口：

       根据 webpack.config.js 文件中的 entry 入口，开始解析文件构建 AST 语法树，找出依赖，递归下去

4: 编译模块：

         递归过程中，根据文件类型和 loader 配置，调用相应的 loader 对不同的文件做不同的转换处理， 再找到该模块依赖的模块，然后递归本步骤，直到项目中依赖的所有模块都经过了本步骤的编译处理

5: 完成模块编译：

       当所有模块编译完成，得到每个文件结果，包含转换后的模块以及它们之间的依赖关系

6: 输出资源：

        根据 entry 以及 output 等配置生成代码块 chunk。

【 这些Module会以Entry为单位进行分组，即为一个Chunk。因此一个Chunk，就是一个Entry及其所有依赖的Module合并的结果 】

7: 打包完成：

        根据 output 配置输出所有的 chunk 到相应的文件目录

在整个构建流程中，Webpack会在恰当的时机执行Plugin里定义的逻辑，从而完成Plugin插件的优化任务。

　

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

loader：在webpack中提供编译和转化代码的功能

 作用：

       是对不同资源做处理，将一些浏览器不支持或者有兼容性问题的代码做处理转化为浏览器支持的资源代码，

（就是帮助 webpack 打包那些，webpack默认打包不了的模块，的工具）

如将es6 转化为 es5, 将sass 转化为 css，处理图片，文件等

思路：

1: 通过 module.exports导出一个函数

2: 该函数默认接收一个参数source（要处理的资源文件）

3: 在函数体中处理资源（loader 里配置响应的loader 后）

4: 通过return 返回最终打包后的结果（这里返回的结果需为字符串形式）

module.export = (source) => {
	// 做一些处理操作之后，把结果返回回去
	return source
}

plugin：

     主要是通过webpack内部的钩子机制(监听webpack的生命周期），在webpack构建的不同阶段做一些额外的工作，如 拷贝静态资源，清空打包文件等，它的插件是一个函数或者是一个包含apply方法的对象，接受一个compile对象，通过webpack的钩子来处理资源

　 思路：

1: 通过钩子机制实现

2: 插件必须是一个函数或者包含apply方法的对象，接收一个compile对象，通过该对象注册钩子函数

3: 在方法体内通过webpack提供的API获取资源做响应处理

4: 将处理完的资源通过webpack提供的方法返回该资源

class myPlugin = {
			// compiler对象，通过这个对象注册钩子函数
			apply (compiler) {
				// 注册emit钩子方法
				// compilation 可以理解为上下文
				compiler.hook.emit.tap('myPlugin', compilation => {
					// 执行相应的处理修改内容
				})
			}
		}