什么是webpack？
本质上，webpack 是一个现代 JavaScript 应用程序的 静态模块打包工具 。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle 。 --webpack官方 |
webpack本质上是一种模块打包工具，它会分析你给出的项目结构对，能把各种资源js，css（sass、less），jpg（png）图片等都作为模块来使用和处理，所以它具有模块打包与模块加载两种功能。
以下两张图，可以形象表明webpack的行为或者说webpack做了些什么：
webpack在打包js资源时候，会把零碎的js资源打包成一个budle.js 输出，这样既减下了整个的包大小同时也会减少加载项目时候http请求数，提高用户体验
webpack 是如何工作的？
它把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。 |
如果觉得官方说法过于笼统，可以这样细化：
- 解析webpack配置参数，合并从shell传入和
webpack.config.js文件里配置的参数，生产最后的配置结果。 - 注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。
- 从配置的
entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。 - 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
- 递归完后得到每个文件的最终结果，根据
entry配置生成代码块chunk。 - 输出所有
chunk到文件系统。
针对细化过的webpack工作流程，可以通过实际的demo进行体会。
动手实现一个webpack打包过程demo
1.用npm init 初始化一个干净的新项目
2.用npm install --save-dev webpack 本地安装webpack
3.规划项目结构
app：放置项目要用到的逻辑代码
dist：后期打包出来的代码目录
index.html 根网页文件
部分依赖关系：
index.htm<= main.js <= app.js <= tool.js
4.书写代码
tool.js:
app.js:
main.js(bundle.js):
此处由于是自动生成的代码，用户可用使用node_modules/.bin/webpack app/app.js 生成该代码
通过生成的代码路径，可以看出main,js 融合了app.js 与 tool.js以及看到两个文件的大小以及压缩以后的main,js大小
index.html:
5.运行项目
webpack与rollup，webpack与gulp（grunt）
webpack 与rollup 是属于竞品的关系，rollup作为后期之秀隐隐有赶超webpack之势。
webpack与gulp是属于有功能交集的地方，应用场景不尽相同
