Webpack和Browserify
Webpack和Browserify做的工作几乎相同，即处理要在目标环境中使用的代码（主要是浏览器，但也可以针对Node等其他环境）。这种处理的结果是一个或多个适合目标环境的捆绑脚本。
例如，假设您编写了分成模块的ES6代码，并希望能够在浏览器中运行它。如果这些模块是Node模块，浏览器将无法理解它们，因为它们只存在于Node环境中。ES6模块也不能在IE11这样的旧浏览器中工作。此外，您可能使用了浏览器尚未实现的实验性语言特性（ES下一个建议），因此运行这样的脚本只会抛出错误。Webpack和Browserify等工具通过将这些代码转换为浏览器能够执行的形式来解决这些问题。除此之外，他们还可以对这些捆绑包应用各种各样的优化。
然而，Webpack和Browserify在许多方面都有所不同，Webpack默认提供了许多工具（例如代码拆分），而Browserify只能在下载插件后才能做到这一点，但使用这两种工具会产生非常相似的结果。这取决于个人喜好（Webpack更时尚）。顺便说一句，Webpack不是一个任务运行器，它只是文件的处理器（它通过所谓的加载程序和插件处理文件），它可以由任务运行器运行（以及其他方式）。
Webpack开发人员服务器
Webpack开发服务器提供了与Browsersync类似的解决方案-在开发服务器上，您可以在开发应用程序时快速部署应用程序，并立即验证开发进度，开发服务器会在代码更改时自动刷新浏览器，甚至将更改的代码传播到浏览器，而无需重新加载所谓的热模块替换。
任务执行者与NPM脚本
我一直在使用Gulp，因为它简洁明了，易于编写任务，但后来发现我根本不需要Gulp和Grunt。我所需要的一切都可以使用NPM脚本通过其API运行第三方工具来完成。在Gulp、Grunt或NPM脚本之间进行选择取决于团队的品味和经验。
虽然Gulp或Grunt中的任务即使对于不太熟悉JS的人来说也很容易阅读，但这是另一个需要学习的工具，我个人更喜欢缩小依赖关系，使事情变得简单。另一方面，用运行这些第三方工具的NPM脚本和（可能是JS）脚本的组合来替换这些任务（例如，节点脚本配置和运行rimraf以进行清理）可能更具挑战性。但在大多数情况下，这三者的结果是相等的。
示例
至于示例，我建议您看看这个React starter项目，它向您展示了涵盖整个构建和部署过程的NPM和JS脚本的完美组合。您可以在根文件夹的package.json中的名为scripts的属性中找到这些NPM脚本。在那里，您将主要遇到babel node tools/run start之类的命令。Babel节点是一个CLI工具（不用于生产），它首先编译ES6文件tools/run（位于工具中的run.js文件）-基本上是一个runner实用程序。这个运行程序将一个函数作为参数并执行它，在本例中它是start-另一个实用程序（start.js），负责绑定源文件（客户端和服务器）并启动应用程序和开发服务器（开发服务器可能是Webpack dev server或Browsersync）。
更准确地说，start.js创建了客户端和服务器端捆绑包，启动了一个express服务器，并在成功启动后初始化了浏览器同步，在编写本文时是这样的（请参阅react starter项目以获取最新代码）。
const bs = Browsersync.create();
bs.init({
...(DEBUG ? {} : { notify: false, ui: false }),
proxy: {
target: host,
middleware: [wpMiddleware, ...hotMiddlewares],
},
// no need to watch '*.js' here, webpack will take care of it for us,
// including full page reloads if HMR won't work
files: ['build/content/**/*.*'],
}, resolve)
重要的部分是proxy.target，他们在其中设置要代理的服务器地址，该地址可以是http://localhost:3000，并且Browsersync启动服务器侦听http://localhost:3001，其中生成的资产被用于自动变化检测和热模块更换。正如您所看到的，还有另一个配置属性文件，其中包含单独的文件或模式。浏览器同步会监视更改并在发生某些更改时重新加载浏览器，但正如评论所说，Webpack会自行使用HMR监视js源，因此它们会在那里进行协作。
现在我没有任何类似Grunt或Gulp配置的示例，但使用Gulp（和Grunt有点类似），您可以在gulfile.js中编写单独的任务，如
gulp.task('bundle', function() {
// bundling source files with some gulp plugins like gulp-webpack maybe
});
gulp.task('start', function() {
// starting server and stuff
});
在这里，你将要做的事情基本上与初学者工具包中的相同，这一次是任务执行器，它为你解决了一些问题，但在学习使用过程中会出现自己的问题和一些困难，正如我所说的，依赖性越多，就越可能出错。这就是我喜欢摆脱这种工具的原因。
