都属于前端构建工具，Gulp 是任务管理工具，Webpack 是模块化打包工具。

Gulp

Gulp / Grunt 是一种工具，能够优化、增强前端工作流程，比如自动刷新页面、combo、压缩 CSS、压缩 JS、编译 Sass /Less、mock 数据等等。简单来说，就是使用 Gulp，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。Gulp 是通过 task 对整个开发过程进行构建。

Webpack

Webpack 是前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJS 模块、AMD 模块、ES6 模块、CSS、图片、JSON、LESS 等。

Gulp 和 Webpack 功能实现对比

Gulp 侧重于前端开发的整个过程的控制管理（像是流水线），我们可以通过给 gulp 配置不同的 task（通过 Gulp 中的 gulp.task() 方法配置，比如启动 server、sass/less 预编译、文件的合并压缩等等）来让 gulp 实现不同的功能，从而构建整个前端开发流程。

Webpack 有人也称之为模块打包机，由此也可以看出 Webpack 更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js 文件、css 文件等）都可以看成模块，最初 Webpack 本身就是为前端 JS 代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack 是通过 loader（加载器）和 plugins（插件）对资源进行处理的。

另外我们知道 Gulp 是对整个过程进行控制，所以在其配置文件（gulpfile.js）中配置的每一个 task 对项目中该 task 配置路径下所有的资源都可以管理。

Webpack 则不是这样管理资源的，它是根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。通俗的说，Webpack 是需要通过其配置文件（webpack.config.js）中 entry 配置的一个入口文件（JS 文件），比如：

entry: {
  app:__dirname + 'src/scripts/app.js',
}

然后 webpack 进入该 app.js 文件进行解析。

解析过程中，发现一个 app.sass 文件，然后根据 webpack.config.js 配置文件中的 module.loaders 属性去查找处理 .sass 文件的 loader 进行处理，处理 app.sass 文件过程中，如果发现该文件还有其他依赖文件，则继续处理 app.sass 文件的依赖文件，直至处理完成该“链路”上的依赖文件。然后再往下处理其它文件。

所以，Webpack 中对资源文件的处理是通过入口文件产生的依赖形成的，不会像 Gulp 那样，配置好路径后，该路径下所有规定的文件都会受影响。

"@babel/core",
"@babel/plugin-transform-runtime",
"@babel/polyfill",
"@babel/preset-env",
"babel-loader",
"copy-webpack-plugin",
"css-loader",
"file-loader",
"HTML-webpack-plugin",
"Node-sass",
"sass-loader",
"string-loader",
"style-loader",
"url-loader",
"webpack",
"webpack-dev-server"

下边我们看下他们相同的功能，