模块化开发与规范化标准你知道多少？

---

一. 模块化开发的过程

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

webpack 作为前端最火的打包工具之一，其本质就是一个现代 Javascript 应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
首先简单了解一下 webpack 构建过程：

1. 根据配置，识别入口文件；
2. 逐层识别模块（包括 CommonJs，AMD，或者ES6的import 等，都会被识别分析）
3. webpack 主要工作就是分析代码，转换代码，编译代码
4. 打包输出以上步骤编译的代码；
   看完上面的构建流程的简单介绍，接下来再详细介绍 webpack 构建原理：
   （1）初始化参数
   解析 Webpack 配置参数，合并 Shell 传入和 Webpack.config.js 文件配置的参数，形成最后的配置结果。
   （2）进行编译
   在第一步得到的参数初始化 compiler 对象，注册所有配置的插件，插件监听 webpack 构建生命周期的事件节点，做出相应的反应，执行对象的 run 方法开始执行编译。
   （3）确定入口
   从配置文件 webpack.config.js 中指定 entry 入口，开始构建 AST 语法树，找出依赖，递归下去；
   （4）编译模块
   地柜中根据文件类型和 Loader 配置，调用所有配置的 loader 对文件进行转换，再找出改文件依赖的模块，继续递归本步骤，直到所有入口依赖的文件都经过了本步骤的处理；
   （5）完成模块编译并输出
   递归完后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据 entry 入口配置生成代码块 chunk，并输出所有的 chunk 到文件中；

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

Webpack 中 loader 用于对模块的源代码进行转换。通俗说法， loader 就是文件加载器，它能够加载资源文件，并对这些文件进行统一处理，诸如编译，压缩，引用等，最终打包到指定的文件中。处理一个文件可以用到多个 loader ，loader 的执行顺序和配置中的顺序相反，也就是配置中最后一个loader 先执行，第一个 loader 最后执行；第一个执行的loader 的返回值接收源文件内容作为参数，其他loader 接收前一个执行的loader 的返回值作为参数，最后执行的loader 会返回此模块处理后的 jascript 代码。
webpack 中 loader 负责资源文件从输入到输出的转换。那么编写自己的loader 时，需要引入官方提供的 loader-utils， 调用loader.getOptions() 来获取wenpack的配置参数。loader本身就是一个函数，接收模块代码的内容然后返回代码内容转化后的结果，输出一段javascript 代码或者可以链式经过多个loader进行转化，比如：less-loader >>> css-loader >>> style-loader.。上一个loader 处理的结果将会传给下一个loader接着处理，最后的loader 会将处理的最终结果返回给 webpack。

再说一下 Webpack 中的 Plugin ，webpack中的plugin 功能更加强大，loader 不能做的， plugin 都能做。plugin 的功能更加丰富。从打包、优化和压缩，到重新定义环境变量。功能强大到可以用来处理各种各样的任务。plugin 让 webpack 更加灵活，它在编译过程中留下了一系列生命周期钩子，通过这些钩子来实现在不同编译结果时对源模块进行处理。
webpack plugin 的实现可以是一个类，使用的时候传入相关配置来创建一个实例，然后放到配置的 plugins 字段中，而plugin 实例中最重要的方法就是apply，该方法在 webpack complier安装插件的时候会被调用一次。apply 接收 webpack complier 对象实例的医用。可以在complier 对象实例上注册各种事件钩子函数，来影响 webpack 的所有构建流程。 以便于完成更多的其他构建任务。

二、动手实操收获更多

1、使用 Webpack 实现 Vue 项目打包任务

https://github.com/mzqmarks/part2-2webpack-vue.git