Webpack构建与React脚本构建

Question

说webpack的配置如下

{
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
},

现在webpack的构建是

和react-scripts构建的构建（静态包含单独文件夹中的css，js和媒体）

问题：相对于react-scripts，webpack有什么特别的优势吗？ （包括但不限于性能）

注意：已对package.json进行了编辑。

Answer 1

Webpack是通用捆绑器，其应用程序超出了React。在create-react-app之前，网络上充斥着建立一个全新的React项目的示例，该项目使用webpack作为捆绑程序。它非常灵活，可以处理React应用程序所需的其他内容。它适用于Angular，Vue，NodeJS甚至Web Assembly。

但是以前需要花一些时间进行设置。您将需要了解其工作原理并对其进行配置，以便可以将React + ES6代码转换为普通计划的JS。您需要确定所需的输出结构并为其配置webpack。然后自己添加热模块重装和代码拆分支持。在此期间，您还需要添加Webpack所需的其他插件以支持上述所有：）。

这自然使刚开始使用React的人们感到有些疲劳。

因此，facebook创建了内部使用webpack的cra，它预先配置为包括所有不错的工具，以照顾这些基础知识，并帮助您专注于代码的React部分。它会尽可能向您隐藏webpack，否则如果用户更改配置，则构建过程可能会中断。

此外，cra所使用的结构约定对基本的webpack设置不应有任何性能影响。这只是一个约定。

您的问题应该是，我什么时候使用create-react-app以及何时使用Webpack？

作为初学者，您可能希望在专注于React应用程序时坚持自己的想法。最终，有时Webpack配置cra不支持您想要做的事情。一个非常常见的示例是，如果您想编写一个组件库以在其他应用程序中重用。 cra无法做到这一点（这与整个应用程序有关：）。然后，您可以切换到Webpack并开始学习。

Answer 2

react-scripts将所有的webpack配置隐藏在幕后。这样做的好处是它更干净，并且由于create-react-app会定期更新，因此很容易与React，Webpack和Babel保持同步。社区会自动为您解决问题。

就性能而言，无论与react-scripts还是与webpack都应该相同。

仅运行webpack的优点：

• 完全控制环境

• 可以轻松进行自定义操作，例如服务器端呈现（create-react-app

仍然可以实现）

• 对Webpack的了解

仅webpack的缺点

• 完全负责webpack的更新和维护（某些webpack版本不向后兼容或将来不兼容）

• 如果您想学会快速反应，可能会令人感到恐惧和头痛。

如果您想自定义create-react-app，请参考

https://auth0.com/blog/how-to-configure-create-react-app/

这是带有create-react-app的服务器端呈现

https://hackernoon.com/server-side-rendering-with-create-react-app-1faf5a9d1eff

TLDR：如果出于任何原因要尽可能快地到达0-100，请使用create-react-app / react-scripts

如果您喜欢在引擎盖下闲逛，请仅使用webpack