什么是webpack ?
webpack 是一种前端构建工具,前端静态资源打包工具。
webpack 是以入口文件开始递归便利所有依赖,生成一个静态依赖图 - chunk文件。 再通过不同的loader对 文件进行编译处理,最终生成一个bundle文件输出。
为什么要使用webpack ?
复杂的JavaScript代码和一大堆依赖包, 原来 原生阶段,通过script标签引入,有时一个依赖 依赖另外一个依赖,直接引入方式会导致项目混乱不堪,而且都是暴露的全局变量,容易造成全局变量污染。
所以为了简化开发,前端社区涌现出了很多好的实践方法。模块化开发(CMD,requerejs,ES6模块化)等,typescript 扩展js功能, sass 作为css预处理器。
这些改进能大大提升我们的开发效率,但是利用它们进行开发往往需要进行额外的处理才能让浏览器识别,而手动处理又非常繁琐。所以就为webpack等构件打包工具的出现提供了需求。
webpack 的特点,优点 ?
基础入口文件的:webpack会基于入口文件进行静态资源分析和和打包。所以一般单页面应用就一个入口文件,多页面应用需要配置多个入口文件。
基于模块化的:webpack看来,所有的文件都是模块化的文件。这样的好处是能清晰的描述出各个模块之间的依赖关系,以方便webpack对模块进行组合和打包。经过webpack的处理,最终会输出浏览器能使用的静态资源。
Webpack的优点是:
专注于处理模块化的项目,能做到开箱即用一步到位;
通过 Plugin 扩展,完整好用又不失灵活;
使用场景不仅限于 Web 开发;
社区庞大活跃,经常引入紧跟时代发展的新特性,能为大多数场景找到已有的开源扩展;
良好的开发体验。
webpack 和 grunt、gulp、rollup,parcel比较
webpack、grunt、gulp 比较 :
grunt、gulp 是基于任务的方式处理文件的,webpack是基于入口文件,通过递归遍历所有引用的静态资源的。
grunt、gulp 的集中度不高,需要写很多配置文件才可以用,无法做到像webpack那样开箱即用。在功能上,灵活性上,处理es6模块化上webpack都有一定的优势。
webpack 和 rollup 、 parcel 比较
首先共同点:三个都是基于入口文件进行打包的。
webpack 为处理资源管理和分割代码而生,可以包含任何类型的文件。灵活,插件多。
ollup:用标准化的格式(es6)来写代码,通过减少死代码尽可能地缩小包体积。
parcel:超快的打包速度,多线程在多核上并发编译,不用任何配置。
一般经验上:对于复杂有很多依赖的应用使用 webpack进行打包,对于类库使用 Rollup打包,对于功能简单的应用可以使用小而美的parcel进行打包。