参考文章：https://github.com/6fedcom/fe-blog/tree/master/webpack/webpack
什么是前端工程化？
前端工程化是一种软实力，和业务逻辑无关，它关注如何模块化文件，如何编译文件，如何压缩文件，如何打包文件，从而使项目更稳定，更好维护。
webpack的工作流程是怎样的？
- 根据命令执行到相应的bin文件，读取相关参数，如:--mode,--debug,--progress等。
- 调用createCompiler方法初始化Compiler，在该方法中可以拿到webpack.config.js的配置，执行了所有插件的apply方法，并且挂载了plugin中调用到的钩子函数，如make,comile,emit等。
- 调用compiler.run()方法开始编译
- 以entry为为入口文件，使用配置的loader编译入口文件，如babel-loader 将Import 编译成require。
- 使用acron生成入口文件的AST树。
- 如果入口文件中require了其他文件，会同样使用 loader 对文件进行编译，并寻找该文件引入的文件，以此循环。详见webpack是如何进行依赖收集的？
- 编译完成后，会将结果存储在compilation.assets和compilation.chunk中，然后触发emit钩子函数，将内容输出到 ouput.path路径下。
- 编译成功会执行 done 钩子函数，编译失败会执行 failed 钩子函数。
webpack 是如何进行依赖收集的？
- webpack 自定义了一个 webpack_require函数，文件中的所有 require 会被替换为 webpack_require。在该函数内定义了一个对象
let module = {exports:{}} - 该函数接收一个对象为参数，key 是文件的路径，value 是一个函数,函数体是通过 fs 读取出的文件内容。函数的参数是 webpack_require方法、module对象和module.exports对象。会调用value函数，调用时如果文件内部也使用webpack_require引入了其他模块，则会形成一个循环调用，在文件内使用 module.exports 导出的内容就赋值给了外层函数定义的变量
- webpack 打包后的文件是一个自执行函数IIFE，该函数接收所有文件的
{路径：内容}为参数，该参数是通过一个遍历方法获取的。在该函数中调用了webpack_require函数。
; (function (modules) {
// webpackBootstrap
// 缓存 __webpack_require__ 函数加载过的模块，提升性能，
var installedModules = {}
/**
* Webpack 加载函数，用来加载 webpack 定义的模块
* @param {String} moduleId 模块 ID，一般为模块的源码路径，如 "./src/index.js"
* @returns {Object} exports 导出对象
*/
function __webpack_require__(moduleId) {
// 重复加载则利用缓存，有则直接从缓存中取得
if (installedModules[moduleId]) {
return installedModules[moduleId].exports
}
// 如果是第一次加载，则初始化模块对象，并缓存
var module = (installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {},
})
// 把要加载的模块内容，挂载到module.exports上
modules[moduleId].call(
module.exports,
module,
module.exports,
__webpack_require__
)
module.l = true // 标记为已加载
// 返回加载的模块，直接调用即可
return module.exports
}
return __webpack_require__((__webpack_require__.s = './index.js'))
})({
"./index.js": function (
module,
__webpack_exports__,
__webpack_require__
) {
'use strict'
eval(
'__webpack_require__("./test.js")'
)
}, "./test.js": function (module, exports) {
eval('console.log("moduleA")\n\n//# sourceURL=webpack:///./src/moduleA.js?')
},
})
comiler vs compilation 对象？
compiler 负责启动编译，整个生命周期中只有一个compiler对象，该对象可以获取到webpack.config.js文件。
compilation 负责编译，没编译一次，会生成一个compilation 对象，该对象可以获取到源文件，编译后的文件。
plugin vs loader?
plugin 仍然是在处理文件，自定义插件可以在构建流程中自定义行为，需定义一个函数或类并实现apply方法。
loader 是在扩展webpack的能力，比如提供解析.test后缀文件的能力，只需要导出一个方法即可。
创建plugin比创建loader更高级，因为需要了解webpack的底层钩子函数。
