写在前面：前端构建从刀耕火种的npm script到如今的webpack0配置到底经历了什么，下边我将为大家一一道来
1.前度构建史
- npm script
主要是通过一些script中一些 shell脚本实现前端构建
- grunt vs gulp
grunt 有大量现成的插件封装了常见任务，也能管理任务之间的依赖关系，自动化地执行依赖任务
gulp 一个基于流的自动化构建工具。除了可以管理任务和执行任务，还支持监听文件、读写文件。
举个🌰：他们同样将less转化成css压缩版
grunt:读取 less 文件 -> 编译成 css -> 存储到磁盘 -> 读取 css -> 压缩处理 -> 存储到磁盘
gulp:读取 less 文件 -> 编译成 css -> 压缩处理 -> 存储到磁盘
它们都是基于任务的构建工具
- webpack
webpack与他们不同，它是另一个思路，入口文件为js。html、css看做js的模块进行导入，有需要则用对应的loader解析，再通过plugins（html-webpack-plugin,extract-text-webpack-plugin）将他们分别抽离出去
- rollup
面向es moudle打包，编译时确定依赖关系,tree-shaking
目前来看只有es6模块化才能支持tree-shaing,因为它是编译时确定依赖关系，便于打包工具分析
rollup vs webpack
🎉rollup高性能的bundle
🎉webpack 可靠的依赖模块处理，不像rollup那样仅面向es module，面临cjs的问题（webpack通过__webpack_require__实现各种类型的模块依赖问题）
- parcel
parcel就是推出主要是因为webpack2,3版本配置项太多，对新手快速搭建一个项目不友好，所以推出0配置的概念，但是正在的0配置想要改一些东西适合项目又变得不灵活
parcel还有个优点就是速度相对于webapack2,3快一些，由于带有缓存文件，所以第二次打包会快更多。
