webpack 的工作流程

参考文章：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的底层钩子函数。