说说webpack的构建流程？

结论先行：

Webpack 的运行流程是⼀个串⾏的过程，从启动到结束大概会经历以下流程：

初始化参数：读取与合并所有的配置参数，加载所有的插件（Plugin），实例化 Compiler 对象并调用 run 方法启动编译。

① 初始化参数：从配置⽂件和 Shell 语句中读取与合并参数，得出最终的参数；

② 开始编译：⽤上⼀步得到的参数初始化 Compiler 对象，加载所有配置的插件，执⾏对象的 run ⽅法开始执⾏编译； 

编译模块：从 Entry 入口文件出发，调⽤所有配置的 Loader 对模块进⾏翻译，再找到该模块依赖的模块，递归地进行编译处理

再根据 module.rules 里配置的 loader 进行相应的转换处理，对 model 转换后在解析出module 依赖的其他模块，解析出一个一个的 chunk ( model 进行分组)，最后所有的 chunk会转换成文件输出的 output

③ 确定⼊⼝：根据配置中的 entry 找出所有的⼊⼝⽂件；

④ 编译模块：从⼊⼝⽂件出发，调⽤所有配置的 Loader 对模块进⾏翻译，再找出该模块依赖的模块，再递归本步骤直到所有⼊⼝依赖的⽂件都经过了本步骤的处理；

⑤ 完成模块编译：在经过第4步使⽤ Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；

输出资源：将编译后的模块组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中 

⑥ 输出资源：根据⼊⼝和模块之间的依赖关系，组装成⼀个个包含多个模块的 Chunk，再把每个 Chunk 转换成⼀个单独的⽂件加⼊到输出列表，这步是可以修改输出内容的最后机会；

⑦ 输出完成：在确定好输出内容后，根据配置确定输出的路径和⽂件名，把⽂件内容写⼊到⽂件系统。

在整个构建流程中，webpack会在恰当的时机执行 plugin 里定义的那些插件，从而完成 plugin 插件里的任务。

在以上过程中，Webpack 会在特定的时间点⼴播出特定的事件，插件在监听到感兴趣的事件后会执⾏特定的逻辑，并且插件可以调⽤ Webpack 提供的 API 改变 Webpack 的运⾏结果。

具体分析：

webpack 的运⾏流程是⼀个串⾏的过程，从启动到结束会依次执⾏以下流程： 

1、初始化参数

从配置文件和  Shell 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数。

配置文件默认下为 webpack.config.js，也可以通过命令的形式指定配置文件；

主要作用是用于激活 webpack 的加载项和插件：

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

module.exports = {
  // 入口文件，是模块构建的起点，同时每一个入口文件对应最后生成的一个 chunk。
  entry: './path/to/my/entry/file.js'，
  // 文件路径指向(可加快打包过程)。
  resolve: {
    alias: {
      'react': pathToReact
    }
  },
  // 生成文件，是模块构建的终点，包括输出文件与输出路径。
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
  },
  // 这里配置了处理各模块的 loader ，包括 css 预处理 loader ，es6 编译 loader，图片处理 loader。
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ],
    noParse: [pathToReact]
  },
  // webpack 各插件对象，在 webpack 的事件流中执行对应的方法。
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

webpack 将 webpack.config.js 中的各个配置项拷贝到 options 对象中，并加载用户配置的 plugins；

2、开始编译 

完成上述步骤之后，则开始初始化 Compiler 编译对象。该对象掌控着 webpack 声明周期，不执行具体的任务，只是进行一些调度工作。

初始化完成后会调用 Compiler 的 run 方法来真正启动 ​​​​​​​webpack 编译构建流程。

class Compiler extends Tapable {
    constructor(context) {
        super();
        this.hooks = {
            beforeCompile: new AsyncSeriesHook(["params"]),
            compile: new SyncHook(["params"]),
            afterCompile: new AsyncSeriesHook(["compilation"]),
            make: new AsyncParallelHook(["compilation"]),
            entryOption: new SyncBailHook(["context", "entry"])
            // 定义了很多不同类型的钩子
        };
        // ...
    }
}

function webpack(options) {
  var compiler = new Compiler();
  ...// 检查options,若watch字段为true,则开启watch线程
  return compiler;
}
...

Compiler 对象继承自 Tapable，初始化时定义了很多钩子函数

3、确定入口

 根据配置中的 entry 找出所有的入口文件

module.exports = {
  entry: './src/file.js'
}

4、编译模块

 从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。   

5、完成模块编译

在经过第4步使⽤ Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；

6、输出资源

对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。

根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表。

7、输出完成 

在确定好输出内容后，根据配置确定输出的路径和文件名：

output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
}

注意： 

在 Compiler 开始生成文件前，钩子 emit 会被执行，这是我们修改最终文件的最后一个机会

从而 ​​​​​​​webpack 整个打包过程则结束了。