Webpack 构建与反应脚本构建

Question

假设webpack配置如下

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

现在 webpack 的构建是

以及从 react-scripts 构建的构建（静态包含 css、js 和媒体在单独的文件夹中）

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

注意：编辑package.json以实现此目的。

Answer 1

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

Answer 2

Webpack 是一个通用的打包器，其应用程序超越了 React。在 create-react-app 之前，网络上充满了使用 webpack 作为打包器来建立一个全新的 React 项目的例子。它非常灵活，可以处理包括和超出 React 应用程序所需的事情。它适用于 Angular、Vue、NodeJS 甚至 Web Assembly。

但过去需要一段时间才能设置。您将需要了解它的工作原理并对其进行配置，以便您可以将 React+ES6 代码转换为 plan-vanilla JS。你需要决定你喜欢的输出结构并为它配置 webpack。然后自己添加热模块重新加载和代码拆分支持。在此期间，您还需要添加 Webpack 所需的其他插件以支持以上所有内容:).

这自然会让刚开始使用 React 的人有些疲劳。

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

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

那么你的问题应该是，我什么时候使用 create-react-app，什么时候使用 Webpack？

作为初学者，您可能希望在专注于 React 应用程序时坚持使用 cra。最终会有一段时间，你想做的事情不受 cra 在后台管理的 webpack 配置的支持。一个非常常见的例子是，如果您想编写一个组件库以在其他应用程序中重用。这不能由 cra 完成（这是关于整个应用程序 :)）。然后你就可以切换到 webpack 开始学习了。

Webpack 构建与反应脚本构建

Webpack build vs react-scripts build

reactjs

webpack

react-scripts