reactjs - Webpack 构建与 React-scripts 构建

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 构建有什么具体优势吗？ (包括但不限于性能)

注意:编辑 package.json 来实现此目的。

Answer 1

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

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

这自然会给刚开始使用 React 的人带来一些疲劳。

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

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

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

作为初学者，您可能想坚持使用 cra，因为您专注于 React 应用程序。最终有一天，你想要做的事情不会被底层管理的 webpack 配置支持。一个非常常见的例子是，如果您想编写一个组件库以在其他应用程序中重用。这是 cra 无法完成的(它涉及整个应用程序:))。然后您可以切换到 webpack 并开始学习它。