前言
引入前端工程化的必要性：
ES Modules 存在兼容问题 模块文件过多，网络请求频繁 书写时，前端资源需要模块化管理
webpack 与 gulp 区分
gulp
gulp强调的是前端开发流程，它是通过配置一系列的task事务（例如文件压缩合并、雪碧图、启动server、版本控制等），按一定执行顺序，用gulp执行这些task，从而构建整个前端开发流程。
webpack
webpack是一个前端模块化方案，更侧重模块，把开发中所有资源（图片、js、css等）看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
总结
因此，gulp 更强调流程，而 webpack 更强调模块化，文件压缩合并、预处理等只是附带功能。但2者可以结合互补。
loader：webpack 中解决各种模块资源的引入，实现整体项目打包 plugin: 解决除了资源加载以外，其他的自动化工作。例如： 清除 dist 目录，打包压缩文件，拷贝静态文件至输出目录
常用sourceMap: cheap-module-source-map 每行不超过80个字符， 使用框架
webpack 的分模块加载
大多数时候，并不是所有模块都需要加载，因为HTTP1.1中，每个请求头额外的带宽，延迟，并不能对同一个域名下发起很多次并行请求
