webpack 相关的一些问题

1、webpack是什么？

webpack，一个模块打包器。它把项目中的所有资源js/css/html/.vue/less/img 等等都视为一种资源，每个资源文件都是一个模块。webpack根据每个模块之间的依赖关系将所有的模块打包起来。

webpack的核心概念 入口entry、加载器loader、插件plugin和出口output。

1.1 入口 entry

入口就是告知webpack从哪里开始打包文件

1.2 加载器loader

webpack将所有资源（js/html/css/img等等）都视为模块。但webpack本身能处理的只有JavaScript。因此需要通过loader将其他资源进行处理转换为模块，让webpack可以根据依赖关系将其打包。
loader 可以简单粗暴的理解为 ”翻译器“，loader让webpack有了加载、解析、打包非JavaScript文件的能力，处理对应的文件时需要手动安装对应的loader

1.3 插件 plugin

插件plugin，它可以扩展webpack的功能，让webpack具有更大的灵活性。在webpack运行的生命周期中会广播出许多事件，而plugin会监听这些事件，在合适的时机改变输出结果

1.4 出口 output

weback的打包结果

2、和gulp 的区别

gulp，前端自动化构建工具，强调的是工作流程。通过配置一系列的task（代码压缩、合并、编译、实时更新等）然后定义执行顺序，来让glup执行这个task，从而构建项目整个的开发流程。glup并不能把所有模块打包到一起，也不能构建模块之间的依赖关系

webpack，是一个模块打包器，强调的是前端模块化方案，它更侧重模块打包。webpack把项目中的所有资源都看做模块并构建模块之间的依赖关系，处理打包成符合生产环境部署的前端资源

3、webpack的构建流程

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

1. 初始化参数，从配置文件和shell语句中读取合并参数，得出最终的参数。
2. 开始编译，用上一步得到的参数初始化compiler对象，加载所有的配置的插件，执行对象的run方法，开始执行编译。
3. 确定入口，根据配置中的entry找出入口文件。
4. 模块编译，从入口文件出发，调用所有配置的loader对模块进行翻译，再找出该模块依赖的模块。再递归本步骤知道所有入口依赖都经过了本步骤的处理。
5. 完成模块编译，得到了每个模块被翻译后的内容以及他们之间的依赖关系。
6. 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的thunk࿰