在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
小白求教：webpack是预编译模块化工具，可以结合自身插件完成压缩合并等一系列功能。所以，是否一个项目里可以直接用webpack替代gulp；还是说webpack必须结合其他前端构建工具？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
如果你的 gulp 脚本只是为了调用 webpack 来打包，那就是可以代替的。
问题是 gulp 是以流的形式来执行多项依赖任务，它提供的功能是处理任务依赖和任务流。而 webpack 主要用于打包前端资源，将模块化的JS打包成单一文件(或少量入口+公用文件)。作用不同，不可能完全互相替代。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
webpack是bundler也是loader，通过配置的方式完成模块的加载，预编译，打包输出，而gulp更像是node编程，基于任务流，依赖插件实现一些自动化的构建任务。因此如果要将任务区分开单独执行，例如单独编译sass文件，或单独图片压缩等则用gulp，那么常规的模块化加载编译打包是webpack的专长，可以取代gulp
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我作为一个没有学过gulp，直接上webpack的人来说，我是没有想到webpack还缺些什么功能，所以基本上我认为是够了。
如果你是惯用gulp的，那你就按照你用gulp的习惯，一个一个功能来看webpack实不实现得了就OK了。
再说，功能也不是越多越好，够用就好。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
gulp就是管理执行好几个任务流，webpack是集成好几个任务流的功能，所以也可以把webpack看成一个大的任务流，在某些复杂情况下，gulp是必不可少的
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不可能的,webpack主要功能是模块加载器。而gulp是前端工作流，两者有相似性，但是侧重点不同，不会被替代
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不可能，两者的侧重点是不一样的，虽然部分操作方面，存在重合，但侧重点是不一样的，webpack主张loader，gulp主张工作流
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。主题信息（必填）
主题描述（最多限制在50个字符）
申请人信息（必填）
申请信息已提交审核，请注意查收邮件，我们会尽快给您反馈。
如有疑问，请联系
CSDN &《程序员》研发主编，投稿&纠错等事宜请致邮
你只管努力，剩下的交给时光！
如今的编程是一场程序员和上帝的竞赛，程序员要开发出更大更好、傻瓜都会用到软件。而上帝在努力创造出更大更傻的傻瓜。目前为止，上帝是赢的。个人网站：www.xttblog.com。个人QQ群：、
个人大数据技术博客：https://www.iteblog.com
完整的构建， 附源代码在我刚接触前端开发的时候，已经开始流行各种构建工具了；而当我上手gulp以后，webpack又大行其道了。所以，对前端工程化了解不多的我，有了“What’s the difference between using Gulp and Webpack?”的迷思(??? ?? ???)。
Gulp和Webpack是什么
首先可以从gulp和webpack的官网找到对它们的描述：
gulp: 用自动化构建工具增强你的工作流程
Webpack: 当下最热门的前端资源模块化管理和打包工具
它们都属于前端构建工具，但gulp是任务管理工具（task runner），webpack是模块化打包工具（module bundler）。
任务管理工具
任务管理工具中我们可以声明若干任务，比如合并、压缩、测试等等。任务间可互相依赖，可以是同步，也可以是异步的。然后我们可以自由地选择运行哪个任务，任务管理工具会帮我们运行它（以及它的依赖）。
使用gulp可以配置各种插件来做css或js文件的合并压缩、编译sass或less、添加兼容性前缀（-webkit-, -moz- …）、自动刷新浏览器等等，它能替代手工实现自动化工作、优化前端工作流程。
模块化打包工具
javascript本身并不支持模块化，但对于浏览器中的js和服务端的nodejs，它们运行环境是不同的，并且各自遵循某种规范，那么该如何实现js的模块化呢？
目前有两种主流方案：
在线编译模块化
如seajs和requirejs模块框架，相当于在页面上加载一个CMD/AMD解释器，这样浏览器就认识了define、exports、module这些东西，也就实现了模块化。
预编译模块化
webpack和browserify它们是一个预编译模块的方案，它们遵循了不需要在浏览器中加载解释器。在本地直接写js，不管是AMD/CMD/ES6风格的模块化，它都能识别并编译成浏览器认识的js。
最初Webpack就是为前端js代码打包而设计的，后来被扩展到其他资源（图片、css文件等）的打包处理。Webpack具有grunt、gulp对于静态资源自动化构建的能力，更重要的是，webpack弥补了requirejs在模块化方面的缺陷，同时兼容AMD与CMD的模块加载规范，具有更强大的js模块化的功能。
webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules.
对了，你完全可以gulp搭配webpack来使用，gulp相对来说更灵活，可以做更多的定制化任务，而Webpack更侧重于模块打包。
整合Gulp&Webpack
可以在Gulp中使用webpack-stream，首先需要安装一下需要的模块：
npm install gulp webpack-stream vinyl-named --save-dev
然后在 gulpfile.js 中进行配置：
var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var webpackConfig = require("./webpack.config.js");
gulp.task('webpack', function() {
return gulp.src('./src/app.js')
.pipe(named())
.pipe(webpack(webpackConfig))
.pipe(gulp.dest('./dist/'));
使用 vinyl-named 保持输入和输出的文件名一致, 否则文件名会由webpack打包后自动生成一个hash。
不过这个方案貌似有弊端：
使用webpack-stream虽然可以很方便的将webpack整合到gulp中，但是有致命的问题存在：如果关闭webpack的监听模式，那么每次文件变动就会全量编译JS/CSS文件，非常耗时。
如果打开webpack的监听模式，那么会阻塞其他gulp任务，导致其他gulp任务的监听失效。
所以这种方案几乎不可用！——
所以还是建议用webpack原生方案。
现在的前端开发领域融合了很多后端工程化的思想，很多产品从网页进化成了Web app，它通常是一个单页应用(SPA)，每个页面都通过异步的方式加载，这就会导致大量的代码存在于 client side ，并且前端开发是多语言、多层次的开发工作，各种资源以增量更新的方式加载到浏览器，为了更好的组织这些代码和资源，并且保证它们在浏览器端快速、优雅的加载和更新，便出现了任务管理工具和模块化打包工具。
从此刀耕火种的日子一去不复返了，前端开发正式进入工业化时代！！顿时，心中吹响了新时代的号角，我的脸上洋溢着三胖般的笑容。
一件和阅读有关的事：Kindle Paperwhite 3 入手
我们读书，因为我们孤单，我们读书，然后就不孤单，我们并不孤单。
Please enable JavaScript to view ther.js结合gulp等于webpack（angular为例）
来源：open开发经验库
本人大学时玩dojo，开始了AMD模块化的不归路，工作后一直使用requirejs，感觉非常好。但是，近来随着react的火热，webpack成为了天下无敌的模块化工具，能做模块化，合并压缩，监视等，当我看见webpack甚至还能做反向代理的时候，我整个人都不好了。我已经打算从requirejs转向webpack了，在重构以前老代码的时候，我想记录下历史。使用r.js结合gulp同样可以实现webpack的绝大部分功能。
源代码地址：
例子比较弯弯绕，不适合angular和requirejs的新手看，但是可以只关注思路。
写的是一个任务管理系统，包括用户系统，任务的crud等功能。
组件（components）
angular的组件指的是指令、过滤器、服务等，在这个例子中，我自己编写了若干个组件，包括一个延迟加载工具、一个等待指令、一个确认框、一个wilddog工具模块（里面包含了若干个我能用到的服务），都是我平时经常复用的组件，直接复制文件夹过去就能用。
还包括一些第三方的组件比如，angular-route，angular-ui等，都是直接用bower安装的。跟我自己写的组件原理是一样的哈哈，只不过最后用了一个module打包起来。
模块（modules）
就是按页面划分的功能模块，包括登录、主页、账户、任务四个模块。每个模块都包括config路由，controller，html页面等。
开始打包
npm install requirejs后可以使用r.js了，我们直接使用r.js命令行工具也可以，但是无法实现监视代码变动的功能，所以我们引入gulp来实现监视功能，其他的合并压缩均使用requirejs来实现。
gulpfile.js
var gulp = require('gulp');
var rjs = require('requirejs');
var paths = {
scripts: ['modules/**/*.js', 'modules/**/**/*.js','main.js']
gulp.task('build', function(cb){
rjs.optimize({
baseUrl: "./",
mainConfigFile:"./main.js",
name:'main',
out:'./dist/build-main.js'
}, function(buildResponse){
// console.log('build response', buildResponse);
cb();
}, cb);
// Rerun the task when a file changes
gulp.task('watch', function() {
var watcher = gulp.watch(paths.scripts, ['build']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
gulp.task('default', ['build','watch']); 这个gulp配置文件就写了两个任务，一个是build一个是watch。build任务是直接把requirejs的入口文件（main.js）输入，指定输出目录，再指定配置文件（这里也是main.js），就可以合并压缩了。是不是非常简单。
watch任务就是监视代码变动，如果代码改变就自动合并压缩一次。
那么main.js里面究竟是什么呢？先贴出代码
main.js
'use strict';
require.config({
baseUrl:'',
paths: {
'ngRoute':'bower_components/angular-route/angular-route.min',
'domReady':'bower_components/domReady/domReady',
'text':'bower_components/text/text',
'ui-bootstrap' : 'bower_components/angular-bootstrap/ui-bootstrap-tpls.min',
'angular-animate':'bower_components/angular-animate/angular-animate.min',
'routeConfig':'components/routeConfig'
require([
'domReady!',
'modules/home/main',
'modules/login/main',
'modules/account/main',
'modules/task/main'
],function(){
angular.module("myApp", [
"myApp.home",
"myApp.login",
"myApp.account",
'myApp.task'
]).run(['$rootScope', 'Auth', function($rootScope, Auth) {
// track status of authentication
Auth.$onAuth(function(user) {
$rootScope.loggedIn = !!
//alert列表以及关闭方法
$rootScope.alerts = [];
$rootScope.closeAlert = function(index) {
$rootScope.alerts.splice(index, 1);
angular.bootstrap(document,['myApp']);
}); 这段代码包含两部分，第一部分是requirejs的配置部分，定义了几个假名而已；第二部分是requirejs的入口部分，主要是先加载一些模块，然后用在主module里面声明以来，最后用run方法，启动一些你需要启动的事件，最后的最后手动启动angular。
多米诺骨牌
本文并不打算写requirejs，但是可以简单说一下，requirejs以及其他所有的模块化工具都是一个多米诺骨牌，触发入口文件，继而引入所有的文件。示例程序中的组件和模块就是这样被引入的。将他们封装起来用文件夹打包，在以后的复用过程中，会非常好用！
比较webpack
这些功能webpack都具备，但是requirejs是可以不全部合并的，有些文件需要延迟加载，比如angular程序绝大多数都是SPA ，如果我们一开始就把所有的文件全部合并，势必会造成首次加载速度非常慢，那么如果我们使用requirejs就可以在改变路由时候延迟加载一些js文件，使得首次加载的js文件体积变小。使用webpack的话，恐怕不能直接实现这个功能，但是一定有相关的插件或者模块可以实现类似的。期待webpack，也感谢历史上那些曾经优秀的工具带给我们的便利，让我们码农的工作更加轻松！
来自： 
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动