webpack构建流程（简化版，大概思路）

1、构建流程

1. 初始化参数， 从配置文件和shell语句读取和合并参数，得出最终的参数。
2. 开始编译：用上一步得到的参数初始化Compiler对象。
3. 加载所有配置的插件。
4. 执行对象的run方法开始编译。确定入口：根据配置中的entry找出所有的入口文件。
5. 编译模块：从入口文件出发，调用所有配置的Loader对模块进行编译，再找到该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过本步骤的处理
6. 完成模块编译：经过上一步使用Loader编译完所有模块后，得到了每个模块翻译后的最终内容以及他们之间的依赖关系 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk,再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会。
7. 再把每个Chunk转换成一个单独的文件加入到输出列表。
8. 在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
9. 在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果
   

• 上图shell语句传递命令行参数

 // 1.初始化参数：从配置文件和Shell语句中读取与合并参数，得出最终的参数；
 let options = require('./webpack.config');
 let Compiler = require('./Compiler.js');
 // 2.开始编译：用上一步得到的参数初始化Compiler对象
 let compiler = new Compiler(options);
 // 3.加载所有配置的插件，执行对象的run方法开始执行编译
 if(options.plugins&& Array.isArray(options.plugins)){
   
      for(const plugin of options.plugins){
   
          plugin.apply(compiler);
      }
 }
 // 4.确定入口：根据配置中的entry找出所有的入口文件
 compiler.run();

// Compiler.js
let {
    SyncHook } = require("tapable");
let fs = require('fs');
export default = class Compiler {
   
   constructor(options