摘要：所以它在某些程度上，跟的功能有些相同。严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。更是明显强调模块化开发，而那些文件压缩合并预处理等功能，不过是他附带的功能。
1. webpack 是什么?
先来说一下 webpack 是什么。
webpack 的官方对它是这样定义的：
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
中文的大概意思是说：
webpack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等），并将其转换和打包为合适的格式供浏览器使用。
用大白话可以这样说：
webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js 文件、css 文件等）都看成模块，通过 loader（加载器）和 plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
如果这样还不明白的话，我们来说下前因后果。
在当今的社会，作为 web 开发，会越来越意识到前端的重要性，随着 HTML5、 CSS3、 ES6 各种技术的发展，前端的开发越来越宠大。甚至有些应用就是单页面应用(SPA)，纯 JavaScript 开发，JavaScript 文件的管理也是一个问题。JavaScript 模块化编程，已经成为一个迫切的需求，这就出现了 JavaScript 的模块解决方案，以前是用 requirejs 或 seajs，而现在则是用 webpack。
举个例子，很多人开发了各种优秀的 JavaScript 模块或组件，我们不想重复发明轮子，而是想直接利用别人的模块，就是类似 require 或 include 这样的机制，把别人的模块引入进来，但是 JavaScript 又没有 类或包 这样的概念，那应该如何做呢？
如何去引入别人的模块？引入之后保证各种依赖关系不出错？这就是 webpack 要解决的问题。
模块化的概念我们理解了，那如何理解 打包 这个词呢？
其实，模块化的问题解决之后，webpack 就能把各种资源模块打包合并成一个文件输出给浏览器。在打包的过程中还能对这些资源进行处理，比如压缩减少体积，把 sass 编译成 css, coffee 编译成 js。所以它在某些程度上，跟 grunt/gulp 的功能有些相同。至于与 grunt/gulp 的不同之处，我们下面会讲到。
2. 与 grunt/gulp 的区别grunt/gulp 的定义是 Task Runner。它有点像 ruby 的 Rake或 Thor，如果你不懂 ruby，那 c/cpp语言的 make，这应该总知道吧。它是一种写任务的工具，只是 grunt/gulp 是用 JavaScript 来写 task 而已。
grunt/gulp 强调的是前端开发的工作流程，我们可以通过配置一系列的 task，定义 task 处理的事务（例如文件压缩合并、雪碧图、启动 server、版本控制等），然后定义执行顺序，来让 grunt/gulp 执行这些 task，从而构建项目的整个前端开发流程。
const gulp = require("gulp");
const babel = require("gulp-babel");
// gulp.src 会指定源文件，然后通过 pipe 函数把内容传给下个处理方法，最后 gulp.dest 是输出处理后的文件内容。
gulp.task("default", () =>
gulp.src("src/app.js")
.pipe(babel({
presets: ["es2015"]
}))
.pipe(gulp.dest("dist"))
);
打个比方，如果你的工程模块依赖很简单，不需要把 js 或各种资源打包，只需要简单的合并、压缩，那就不需要 webpack。grunt/gulp 就够用了。反过来，如果你的工程庞大，页面中使用了很多库（SPA很容易出现这种情况），那就可以选择使用 webpack，因为这样既能做到模块化管理，也能做到 grunt/gulp 的一些功能，比如压缩，转化 coffeescript 为 js 等。
gulp 也能和 webpack 结合起来用，gulp 里面有个 webpack-stream 插件。就是让 webpack 专门去做 module dependency 的事情, 生成一个 bundle.js 文件，然后再用 gulp 去做一些其他杂七杂八 minify, uglify 的事情。 后来人们发现 webpack 有个 plugins 的选项， 可以用来进一步处理经过 loader 生成的 bundle.js，于是有人写了对应的插件， 所以 minify/uglify, 生成 hash 的工作也可以转移到 webpack 本身了，挤掉了 gulp 这部分的市场份额。 再后来大家有发现 npm/package.json 里面的 scripts 原来好好用啊，调用任务的时候就直接写一个简单的命令，因为 gulp 也不就是各种插件命令的组合呀，大部分情况下越来越不需要 gulp/grunt 之类的了。 所以你现在看到的很多新项目都是package.json 里面 scripts 写了一堆，外部只需要一个 webpack 就够了。（摘自网络 https://segmentfault.com/q/10...）
最后总结一下：
虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。
grunt/gulp 严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。
webpack 更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。
3. Browserifywebpack 与其和 grunt/gulp 相比较，还不如跟 Browserify 比较，因为它们两者更相近，不过好像 Browserify 应该被 webpack 代替了吧，我对 Browserify 了解也不多，在此就不细说了。
3. 优势webpack 不仅仅能处理 js, 也能处理 css, 也能处理 html，甚至是图片等各种前端资源。
它开发便捷，仅仅使用一个配置文件，就能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转 base64等。
扩展性强，插件机制完善。
4. 为什么要学习 webpack现在最流行的 react、vue、angular 等技术，你要学习和使用它们，难免会碰到 webpack，因为一般都会用 webpack 来构建前端的开发环境，这样，我们还有什么理由不学习呢？
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90203.html
摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...
摘要：全文的目的是达成使用进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。环境安装与前期准备我的基础环境出的开源的编辑器命令行工具，下一个炒鸡好用的神器。只提供组件，对配套技术不做限定，方便用户与现有技术栈快速整合，降低使用成本。 全文的目的是达成使用amazeui-touch进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。 环境安装与前期准备 我的基础环...
摘要：全文的目的是达成使用进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。环境安装与前期准备我的基础环境出的开源的编辑器命令行工具，下一个炒鸡好用的神器。只提供组件，对配套技术不做限定，方便用户与现有技术栈快速整合，降低使用成本。 全文的目的是达成使用amazeui-touch进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。 环境安装与前期准备 我的基础环...
摘要：介绍背景最近和部门老大，一起在研究团队前端新手村的建设，目的在于帮助新人快速了解和融入公司团队，帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。 showImg(https://segmentfault.com/img/remote/1460000020063710?w=1300&h=646); 介绍 1. 背景 最近和部门老大，一起在研究团队【EFT - 前端新手村】的建设...
阅读 2828·2021-11-17 09:33
阅读 3647·2021-11-16 11:42
阅读 3464·2021-10-26 09:50
阅读 1287·2021-09-22 15:49
阅读 2992·2021-08-10 09:44
阅读 3637·2019-08-29 18:36
阅读 3885·2019-08-29 16:43
阅读 2177·2019-08-29 14:10
