Webpack / Babel和react-scripts之间的区别

WebPack和react-scripts稍有不同。

Webpack用于为您的Web应用程序编译软件包，该软件包可以是自由格式，并且具有某些入口点。然后，webpack与babel预设一起使用，这使您可以在相对较旧的浏览器中使用现代ES6 +构造。另外，webpack负责在一个文件中依赖于程序集的node_modules，并可能对其进行压缩和优化。您可以在此处阅读有关webpack原理的更多信息：https ://webpack.js.org/concepts/

React-scripts只是用于启动一些自定义webpack-dev-server的入门工具包，该服务器已配置为与React操场提供的样板一起使用。这只是演示目的。大多数现代的Web库都有它自己的入门工具包，甚至还有服务器端库，例如https://github.com/reimagined/resolve/tree/master/packages/resolve-scripts等

基本上说来，它们有不同的用途，通常会一起出现。我将解释它们的用途。

巴别塔

Babel是翻译者。它可以将各种高版本的ECMAScript（不仅是ECMAScript，而且很容易理解）转换为ES5，ES5得到了浏览器（尤其是较旧版本）的广泛支持。它的主要工作是将不受支持或最先进的语言功能转换为ES5。

Webpack

Webpack尤其是依赖分析器和模块捆绑器。例如，如果模块A要求B作为依赖关系，而模块B要求C作为依赖关系，则webpack会生成一个依赖关系图，例如C-> B->A。实际上，它比这复杂得多，但是一般Webpack的概念是将具有复杂依赖关系的模块打包成束。关于webpack与babel的关系：当webpack处理依赖关系时，它必须将所有内容转换为javascript，因为webpack可以在javascript之上工作。结果，它使用不同的加载程序将不同类型的资源/代码转换为javascript。当我们需要ES6或ES7功能时，可以使用它babel-loader来完成。

反应脚本

当我们开始基于反应的项目时，设置构建环境是一项艰巨且耗时的工作。为了解决这个问题，React的开发人员创建了一个名为npm的软件包react-scripts，其中包含了大多数人对于普通React应用程序所需的许多基本设置。Babel和webpack 作为依赖项包含在react-scripts