学Web前端有必要学习webpack吗?

学Web前端有必要学习webpack吗?必须啊,WebPack其实不算是成为前端工程师必学的技能知识模块，它是一个工具，webpack是一个用于现代JavaScript应用程序的静态模块打包工具。

WebPack可以看做是模块打包机：

它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss，TypeScript等)，并将其打包为合适的格式以供浏览器使用。

现在好多网页有着很多的应用，所以它们的JavaScript代码比较复杂，当然也有着很多的依赖包，所以为了简化开发的复杂度，前端就出现了很多比较好的实践方法

模块化，让我们可以把复杂的程序细化为小的文件;

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为打包类的工具的出现提供了需求。

介绍几款常用打包工具，大家可以根据自己的需要择优选取：

打包工具只是一向可以很好的管理html css javascript，使用可以锦上添花，不使用也没关系。如果你是一位偏向于后端程序员，了解熟悉即可，对于前端程序员来说，现在打包工具基本是个基本技能，你需要多多擅用。

在这里介绍4款主流的打包工具：grunt gulp webpack rollup

Grunt：

较老牌的打包工具，它运用配置的思想来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段，认知成本高，运用的时候需要明白各种插件的配置规则。

Gulp：

用代码方式来写打包脚本，并且代码采用流式的写法，只抽象出了gulp.src gulp.pipegulp.dest gulp.watch接口，运用相当简单。更易于学习和使用，使用gulp的代码量能，比grunt少一半左右。

Webpack:

是模块化管理工具和打包工具。通过loader的转换，任何形式的资源都可以视作模块，比如CommonJs模块、AMD模块、ES6模块、CSS、图片等。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。它定位是模块打包器，而Gulp/Grunt属于构建工具。Webpack可以代替Gulp/Grunt的一些功能，但不是一个职能的工具，可以配合使用。

Rollup：

tree-shaking生成更简洁、更简单的代码。一般而言，对于应用使用Webpack，对于类库使用Rollup;需要代码拆分(Code Splitting)，或者很多静态资源需要处理，再或者构建的项目需要引入很多CommonJS模块的依赖时，使用webpack。代码库是基于ES6模块，而且希望代码能够被其他人直接使用，使用Rollup。