一概念介绍Gulp是taskrunner，Webpack是modulebundler。可以说Webpack和gulp的95%的功能是不能互相替代的，或者说直接的说，是不重叠的。1什么是吞咽？Gulp就像一个产品管道。整个产品从头开始由流水线控制。在管道上，我们可以管理产品。1.1gulp的核心功能：任务定义和组织；基于文件流的构建；插件系统；gulp适用于任何JavaScript场合，类似于一个大型的管理框架，其中的任务和任务所需的工具必须手动编写和引入以控制整个2什么是webpackWebpack类似于一个模块打包器，可以打包很多松散的将模块按照依赖和规则转化为符合生产环境部署的前端资源。体现的意思是：万物皆模块通过loader的转换，任何形式的资源都可以看做是一个模块，比如CommonJs模块、AMD模块、ES6模块、CSS、图片、JSON、Coffeescript、LESS等。2.1webpack的核心功能是根据模块的依赖构建目标文件；loader系统支持不同的模块；插件系统提供更多附加功能；Gulp和Webpack的功能实现对比主要从以下几个方面对比两个框架1概念上Gulp侧重于对前端开发全过程（如流水线）的控制和管理。我们可以为gulp配置一些不合理的任务（通过Gulp中的gulp.task()方法配置，比如启动服务器、sass/less预编译、文件Merge压缩等）让gulp实现不同的功能，从而构建整个前端开发过程。有些人也称Webpack为模块打包器。由此可见，Webpack更侧重于模块的打包。当然，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块。最初，Webpack是为前端JS代码的打包而设计的，后来扩展到其他资源的打包。Webpack通过加载器（loader）和插件（plug-in）来处理资源。另外，我们知道Gulp控制着整个流程，所以在其配置文件（gulpfile.js）中配置的每个任务都可以管理项目中任务配置路径下的所有资源。例如，一个预编译sass文件的task可以预编译其配置路径下的所有sass文件：gulp.task('sass',function(){gulp.src('src/styles/*.scss').pipe(sass().on('error',sass.logError)).pipe(gulp.dest('./build/prd/styles/'));//编译输出路径});Webpack不是这样管理资源的。它根据模块的依赖关系进行静态分析，然后根据指定的规则为这些模块生成相应的静态资源（如下图所示）。需要将各种资源（js/ts/css/html/ejs/img/fonts等）作为模块来对待；模块必须相互依赖，在js中导入模板、图片、样式文件等，样式文件通过url()与图片字体关联；这种依赖关系必须由webpack建立或由插件理解。Webpack的核心是模块化组织、模块化依赖和模块化打包。相对来说，场景仅限于前端模块化封装；虽然也可以使用gulp+插件来实现，但是目前在依赖模块化构建方面还没有人可以替代webpack。通俗的说，Webpack就是一个入口文件（JS文件），需要通过其配置文件（webpack.config.js）中的入口进行配置entry:{app:__dirname+"/src/scripts/app.js",}然后在Webpack中输入app.js文件进行解析，app.js//引入scss文件import'../style/app.scss';//引入依赖模块vargreeter=require('./Greeter.js');文档。getElementById('root').appendChild(greeter());解析过程中，找到一个app.scss文件，然后根据webpack.config.js配置文件中的module.loaders属性，找到处理.scss文件的loader进行处理，在处理过程中app.scss文件，如果发现该文件有其他依赖文件，则继续处理app.scss文件的依赖文件，直到处理完“链接”上的依赖文件，然后遇到一个Greeter。js模块，所以和之前一样继续寻找对应的loader进行处理...所以Webpack中对资源文件的处理是通过入口文件生成的依赖关系形成的，而不是像Gulp那样，配置好路径后，路径全部下指定的文件将受到影响。2模块化开发理念：其实就是利用CommonJS、AMD、CMD等引入和管理静态资源文件，最终发布时到达对应的模块依赖包，只是为了代码解耦查看gulpGulp|——dist:项目输出路径||——module：开发模块（遵循就近依赖原则）||——索引：首页模块||——my：我的模块|——commons：公共静态文件|——src：工作目录||——module：开发模块（遵循最近依赖原则）||——索引：首页模块||——action_.js：开发js（es6语法）|——**.scss：sass模板语言||——vue**.js：vue模板|——my：我的模块|——gulpfile.js：gulp的配置文件|——index.html：首页html文件|——package.json：npm包管理配置文件然后编写任务命令进行css翻译、js压缩/翻译、img、html压缩等操作webpack目录。主要分析entry入口文件中的所有依赖和后续依赖，对公共文件进行抽取、分离、压缩打包3开发过程中的依赖导入gulp中的静态文件大部分已经打标签插入（如果es6语法的import和require在js文件中使用，pluginsplugin和browserify应该加入打包，与其像这样更接近webpack不如直接使用webpack配置各司其职，相互配合，这也是gulp+webpack模型）webpack可以按需插入按需加载（目前我在gulp中使用require--采用了强依赖模式需要的模块已经提前注入）打包，所以在方便性和学习成本上,webpack更胜一筹。4可视化包分析Gulp还没试过，不知道相关插件能不能做，但是webpack由于社区比较活跃，对应的可视化分析插件很多，其中之一是npm安装--save-devwebpack-bundle-analyzervarBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;//...plugins:[newBundleAnalyzerPlugin()]//npm链接地址运行后生成的相关图形分析表是这样的，比较全面的展示了各个包的情况，不能太差。相关参考：链接说明链接说明
