最近我开始研究web pack和react-scripts，我想知道使用它们的优缺点以及它们之间的差异。
答案 0 :(得分：49)
基本上，它们用于不同的目的，通常一起出现。我将解释他们的目的是什么。
Babel是一个转录器。它可以将各种高版本的ECMAScript（不仅仅是ECMAScript，但它很容易理解）转换成ES5，后者得到浏览器（特别是旧版本）的广泛支持。它的主要工作是将不支持的或尖端的语言功能转换为ES5。
Webpack是一个依赖分析器和模块捆绑器。例如，如果模块A需要B作为依赖关系，而模块B需要C作为依赖关系，那么webpack将生成依赖关系图，如C - ＆gt; B - ＆gt;答：在实践中，它比这复杂得多，但一般的概念是Webpack将具有复杂依赖关系的模块打包成捆绑包。关于webpack与babel的关系：当webpack处理依赖关系时，它必须将所有内容都变成javascript，因为webpack在javascript之上工作。因此，它使用不同的加载器将不同类型的资源/代码转换为javascript。当我们需要ES6或ES7功能时，我们使用babel-loader来完成此任务。
当我们启动基于反应的项目时，设置构建环境是一项艰巨而耗时的工作。为了解决这个问题，React的开发人员创建了一个名为react-scripts的npm包，其中包含了大多数人对普通React应用程序所需的大量基本设置。 Babel和webpack是included as dependencies in react-scripts
答案 1 :(得分：4)
WebPack和react-scripts略有不同。
Webpack用于为您的Web应用程序编译bundle，它可以是自由格式的，并且有一些入口点。更重要的是，webpack与babel-presets一起使用，允许您在相对较旧的浏览器中使用现代ES6 +构造。此外，webpack负责在一个文件中依赖于程序集的node_modules，并且可以压缩和优化它。 您可以在此处阅读有关webpack哲学的更多信息：https://webpack.js.org/concepts/
React-scripts只是用于启动一些自定义webpack-dev-server的入门套件，该服务器配置为与React playground提供的样板一起使用。它只是演示目的。大多数现代网络库都有自己的入门套件，甚至是服务器端库，例如<{3}}等等