本教程操作环境：windows7系统、Dell G3电脑。

web前端打包工具

1、Webpack

Webpack: 是模块化管理工具和打包工具，他的宗旨是一切静态资源皆可打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。当webpack处理您的应用程序时，它会在内部构建一个依赖关系图，映射项目所需的每个模块，并生成一个或多个捆绑包。

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

Webpack支持所有流行的模块选项，并已成为React开发的代名词。虽然Webpack声称是一个模块捆绑程序，但是已经可以用作通用任务运行程序了。

2、Grunt

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

3、Gulp

Gulp：用代码方式来写打包脚本，并且代码采用流式的写法，只抽象出了gulp.src, gulp.pipe, gulp.dest, gulp.watch 接口，运用相当简单。更易于学习和使用，使用gulp的代码量能比grunt少一半左右。（PS:此介绍的是gulp3，在gulp4不可用）

4、Rollup

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

5、Parcel

Parcel是一款“速度极快、零配置的web应用程序打包器”。在Web前端培训中，无论是理论知识，还是实践项目操作，都会有关于模块打包工具的学习，让你真正学会使用前端工具。

Parcel有以下这些特点：

• 很快

• 捆绑项目的所有资产

• 没有配置代码拆分

6、browserify

Browserify支持Node.js正在使用的CommonJS模块，它将所有模块编译成单个浏览器兼容的文件。它是基于流式思想设计，可以通过command line，也可以通过API来使用。仅处理javascript模块化的逆过程，但是推动着模块化的更好发展。

7、RequireJS

RequireJS是一个JavaScript文件和模块加载器。它针对浏览器内使用进行了优化，但可以在其他JavaScript环境中使用，例如Rhino和Node。使用像RequireJS这样的模块化脚本加载器将提高代码的速度和质量。

掌握这些前端模块化工具的使用将使你的工作更加轻松有效，模块化已经成为现代前端工程师的一项必备技能。

（学习视频分享：web前端）

以上就是web前端打包工具有哪些的详细内容，更多请关注风君子博客其它相关文章！