随着Webpack越来越流行,很多人开始将它和Gulp作比较。

我在一些论坛看到很多评论在比较网站开发用哪一个更好。这篇文章将简单介绍什么是Webpack, 它和Gulp有什么不同,更重要的是,你该用哪一个?

介绍

前端构建工具的进化史

在过去的几年中,Web开发行业发生了很大变化,新的工具不断取代旧的解决方案。例如,曾经CodeKIT是一种用于编译和分类工具和资产的基于GUI的工具也很流行,它后来由Grunt取而代之。再然后Gulp出现,立即以其直观和强大的方式赢得了网络开发人员的心。

现在,Webpack正处于潮流中。它会完全取代Gulp吗?很多人有不同观点,但趋势确实非常强劲:
Grunt(红) Gulp(蓝) Webpack(黄) 在Google的搜索趋势

所以到底什么是Webpack

我们先从Webpack的官方网站看看:

Webpack takes modules with dependencies and generates static assets representing those modules.
Webpack将模块和它们的依赖生成生成能代表这些模块的静态资源

下面这张图就能代表Webpack做的所有事了:

什么是Webpack

下面是一些webpack入门教程:

Gulp 对比 Webpack

Gulp是任务运行工具

简单来说,任务运行程序是一个允许您自动执行可重复活动的应用程序。任务在JS文件中定义,并使用包含任务名称的命令执行。 你可以,例如:

  • run tests and merge files
  • compile Saas
  • minify CSS/HTML
  • bundle/uglify JS
    Gulp使用步骤也很简单,首先定义一个任务:
gulp.task('test:unit', () => { /* Run unit tests */});
gulp.task('test:e2e', () => { /* Run selenium tests */});
gulp.task('test', ['test:unit', 'test:e2e']);
gulp.task('build:saas', () => { /* Compile Saas */ });

你用下面一个命令开始以上的test:unit和test:e2e两个任务,因为task包含了一个任务数组,数组由test:unit和test:e2e两个任务构成,这个两个任务都会执行:

$gulp test

你也可以单独运行指定任务:

$gulp build:sass

Gulp有很多的扩展plugin,可以帮助你完成很多构建任务。

Webpack不是任务运行工具

相对Gulp来说, Webpack是一个模块构建工具。主要目的是帮助程序模块及其依赖构建静态资源。

假设我们有一个前端程序包含两个js文件和一个css文件:

first.js

require("!style-loader!css-loader!./style.css");
document.write(require("./second.js"));

second.js

module.exports = "Hello world!";

style.css

body {
    background: yellow;
}

我们的目的是用Webpack将它们合并成一个文件。首先,安装Webpack和css loader:

$ npm install webpack -g
$ npm install css-loader style-loader

接下来运行构建命令:

$ webpack ./first.js target.js

运行后将会生成一个target.js文件包含上面的所有文件。

在package.json脚本中使用Webpack

现在我们知道了, Webpack不是用来执行任务的。那是不是意味着我们还是需要用Gulp或者Grunt来处理我们的任务呢?答案是否定的。

其实你只需要在package.json文件中定义任务脚本:

{
 "scripts": {
   "build": "node build.js"
 }
} 

接下来你就可以用npm或者Yarn来执行你的任务了

$npm run build

所以胜者是?

使用这两种工具,您可以处理几乎每种类型的工作流。 在可用性方面,Gulp是获胜者:更容易定义和执行您的任务。 另一方面,Webpack的配置选项更加灵活,开发速度非常快,每天都有一个社区规模扩大。

很难在这里表明一个明确的赢家:这一切都取决于你的工作概况和团队的喜好。

翻译自:https://buddy.works/blog/webpack-vs-gulp#what-is-this-webpack-anyway