Javascript 为什么要在任务运行程序（grunt）上使用模块绑定器（webpack）？

在过去，我的所有开发任务都使用了yeoman生成器Grunt。通常在项目中工作时，我会使用compass来编译我的SCS，然后打包和丑化我的JS，优化图像，整理我的代码，以及许多其他有用的东西

---

最近，我看到一种趋势，人们使用webpack而不是grunt插件来完成这些任务。为什么会这样？在这方面，模块绑定器有什么更好的地方？

我相信其他人也有他们的原因，但我迁移到webpack（更具体地说）的最大原因是它（而不是磁盘）和它的观察者（在内存中）。这使得开发速度大大加快。我的意思是，当我在积极编辑代码时，我可以在升华文本中按住ctrl+s键，当我将alt+tab键切换到Chrome时，它已经完成了重建。我以前有一个grunt+browserify+grunt watch设置，每次保存时至少需要5秒钟来重建（那是在我在grunt build中进行了大量专门优化之后）。话虽如此，我仍然将webpack与gulp集成在一起，因此我为我的项目找到了一个任务运行程序

编辑1：我还想补充一点，旧的grunt+LESS/SASS+browserify+uglify+grunt手表设置没有很好的伸缩性。我在白手起家地做一个大项目。起初情况不错，但随着项目的发展，情况每天都在恶化。最终，等待grunt完成每一个ctrl+s的构建变得令人难以置信的沮丧。很明显，我在等待一堆未更改的文件

另一件好事是webpack允许您在.js中需要样式表，这将在同一模块中建立源文件的耦合。最初，我们通过在.less文件中使用import来建立样式表依赖关系，但这断开了同一模块中的源文件并建立了单独的依赖关系图。所有这些都是非常固执己见的，这只是我个人的观点。我相信其他人会有不同的想法

---

编辑2：好的，在下面的一些讨论之后，让我试着提供一个更简洁、更少固执己见的答案。webpack做得非常好的一件事是，它可以监视、读取、预处理和更新缓存，并以最少的文件I/O和处理量提供服务。Gulp pipe工作得非常好，但当涉及到绑定步骤时，它不可避免地要从临时目录中读取所有文件，包括那些未更改的文件。随着项目的增长，等待此步骤的时间也会增长。另一方面，WebpackDev服务器将所有内容都缓存在内存中，因此开发过程中的等待时间保持最小。然而，要实现这种内存缓存，webpack需要覆盖从手表到服务器的各个部分，所以它需要知道您的预处理配置。一旦您将webpack配置为这样做，您就可以重用相同的配置来生成除dev server之外的其他版本。所以我们就这样结束了。也就是说，您希望webpack执行的具体步骤仍取决于您的个人喜好。例如，我不在我的dev服务器中进行图像处理或lint。事实上，我的lint步骤是一个完全独立的目标。

个人偏好。node.js/javascript世界中似乎有一种奇怪的趋势，即遵循“最佳实践”，每当有新的东西出现时，一群开发人员/博客作者称之为“最佳实践”，一群人加入其中。讨论似乎很难回答，很抱歉给你发了这么多乱七八糟的信息。对我来说，网页不是个人喜好。我不使用，因为webpack开发服务器或许多不错的SublimiteText插件。虽然在某些情况下，它可以替代任务跑步者的使用，但在我当前的项目中，我与gulp一起使用，他们一起是一个赢家团队。webpack的黄金之处在于，您可以考虑模块并管理其依赖关系。在字体终端项目中，您有一个入口点（您的JS代码），该入口点可能需要其他JS文件（模块），应用一些包含字体文件（模块）的CSS（模块），Webpack允许配置您希望如何处理所有模块依赖项并构建资产。您可以创建一个包含所有依赖项的JS文件（是的，也包含CSS），或者创建不同的文件，例如：app.JS、vendor.JS、style.CSS。它构建资产的方式与任务运行程序不同（最初有些奇怪）。当webpack使用两个主要概念：加载程序和插件时，通过gulp或grunt可以定义步骤链。对我来说，看到我的JS代码如何将“require”添加到CSS文件中一开始很奇怪，但现在这给我带来了很大的灵活性。仅供参考，我正在准备一个关于webpack的幻灯片和一篇不错的博客文章：在我看来，你和grunt之间的缩放问题就像是一个设置不好的监视任务。如果不更改css，为什么要让它重新运行less/sass？也许那只是一个咕噜声？我还没有遇到过gulp的问题。@KevinB这实际上是我所说的“grunt构建中的一系列专门优化”中的一个。实际上，为了节省时间，我对构建进行了更精细的调整。但无论如何，情况每天都在恶化，不可避免地变得多余。Gulp的管道与uglify配合使用非常好，但是node.js/common.js风格的打包仍然需要将所有Uglifed源捆绑在一个临时目录上，并写入磁盘或集成webpack。因此，我的观点是，当webpack只需几行配置就可以解决所有这些问题时，为什么还要经历这些麻烦。@KevinB我从grunt+watch+uglify+browserify+express安装到grulp+webpack开发服务器。我实际上并没有大口喝一口+看一看+。。。安装之前。所以我很好奇你的见解。如何设置dev build，使其仅重建已更改的文件？正如我之前所说，我可以看到grunt watch将如何与uglify、Babel、LESS/SASS等配合使用，但当涉及到包装步骤时，它是否需要阅读t