webpack打包流程
在知道webpack基础打包原理之前我们首先浅浅的了解一下什么是webpack？
webpack：模块打包机 或者 模块打包工具
首先：webpack是一个工具，帮助我们更好的处理事情
打包，如何理解？
举个例子：假设我们需要寄快递，我们将许多的武平放入纸皮箱，然后对其进行封箱，这个就是打包 对于前端开发来说，就是将大量的css文件，js文件，图片等 '物品' ，全部都写进一个js文件，而不是在一个 html 页面通过script，link标签去引入多个静态资源。
模块化：不同的css和不同的js就是一个模块。例如：一个html会有一个或多个css和js，这些不同的文件都可以看作不同的模块，不同的模块有不同的作用。
js代码被打包的流程图：
总结来说：webpack这工具，它能够帮助我们讲不通的文件和资源，进行打包（也就是合并在一个文件里面）webpack并不强制你使用某种模块化方案，而是通过兼容所有模块化方案让你无痛接入项目。有了webpack，你可以随意选择你喜欢的模块化方案，至于怎么处理模块之间的依赖关系及如何按需打包，webpack会帮你处理好的。
webpack核心思想
一切皆模块：
正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模 块。因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。
按需加载：
传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边，bundle.js文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个bundle文件，而且异步加载部分代码以实现按需加载。
文件管理
每个文件都是一个资源，可以用require/import导入js
每个入口文件会把自己所依赖(即require)的资源全部打包在一起，一个资源多次引用的话，只会打包一份
对于多个入口的情况，其实就是分别独立的执行单个入口情况，每个入口文件不相干(可用CommonsChunkPlugin优化)
打包原理
把所有依赖打包成一个bundle.js文件，通过代码分割成单元片段并按需加载。
大致流程
webpack的运行流程是一个串行的过程，从重启到结束会依次执行一下流程
-
初始化参数：从配置文件和
Shell语句中读取与合并参数，得出最终的参数 -
开始编译：用上一步得到的参数初始化
Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译 -
确定入口：根据配置中的
entry找出所有的入口文件 -
编译模板：从入口文件出发，调用所有配置的
Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤知道所有入口依赖的文件都经过本步骤的处理 -
完成模块编译：再经过第4步使用
Loader翻译完所有的模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系 -
输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的
Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会 -
输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写到文件系统
在以上过程中，Webpack会在特定时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用Webpack提供的API,改变Webpack的运行结果。Complier
Compiler对象就是webpack的实体（是Tapable的实例，掌控着整个webpack的生命周期），他不执行具体的任务，只是进行一些调度工作。Compiler创建了Compilation对象，这个对象任务执行完毕后会将最终处理结果返回给Compiler。
Compilation
Compilation是编译阶段的主要执行者（是Tapable的实例），执行模块创建、依赖收集、分块、打包等主要任务的对象。
细节流程
Webpack的构建大致就是一个初始化、编译、输出的过程。- 初始化：启动构建，读取与合并配置参数，加载
Plugin，实例化Compiler - 编译：从
Entry发出，针对每个Module串行调用对应的Loader去翻译文件内容，再找到该Module依赖的Module,递归地进行编译处理 - 输出：对编译后的
Module组合成Chunk,把Chunk转换成文件，输出到文件系统
