【webpack 介绍】

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，
其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

 

webpack中有四个核心的概念。 entry、output、loader、plugins。 按照流程这四个概念应该是
入口entry（你要从哪里收拾）
加载loader（开始收拾）
插件plugins（收拾完还觉的不满意就再加点功能）
出口output（收拾整理完之后放哪里）


webpack是一个JS应用打包器, 它将应用中的各个模块打成一个或者多个bundle文件。
借助loaders和plugins，它可以改变、压缩和优化各种各样的文件。输入不同资源，
比如：html、css、js、img、font文件等，然后将它们输出浏览器可以正常解析的文件。

打包工具要解决的问题：
1.文件依赖管理 梳理文件之间的依赖关系
2.资源加载管理 处理文件的加载顺序（先后时机）和文件的加载数量（合并、嵌入、拆分）
3.效率与优化管理 提高开发效率，完成页面优化

webpack的工作步骤如下：
1.从入口文件开始递归地建立一个依赖关系图。
2.把所有文件都转化成模块函数。
3.根据依赖关系，按照配置文件把模块函数分组打包成若干个bundle。
4.通过script标签把打包的bundle注入到html中，通过manifest文件来
管理bundle文件的运行和加载。

打包的规则为：
一个入口文件对应一个bundle。该bundle包括入口文件模块和其依赖的模块。
按需加载的模块或需单独加载的模块则分开打包成其他的bundle。除了这些bundle外，
还有一个特别重要的bundle，就是manifest.bundle.js文件，即webpackBootstrap。
这个manifest文件是最先加载的，负责解析webpack打包的其他bundle文件，使其按要求进行加载和执行。