34

说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 构建相比有什么特定的优势吗？（包括但不限于性能）

注意： package.json 被编辑来实现这一点。

4

2 回答 2

61

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。最终会有一段时间，您想要做的事情不受 webpack 配置 cra 在后台管理的支持。一个非常常见的示例是，如果您想编写一个组件库以在其他应用程序中重用。cra 无法做到这一点（这是关于整个应用程序的 :)）。然后你可以切换到 webpack 并开始学习它。

于 2018-09-05T07:41:25.777 回答
20

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

于 2018-09-05T06:50:05.953 回答