Webpack 构建与 react-scripts 构建

IT技术 reactjs webpack react-scripts
2021-05-15 08:11:33

说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 被编辑以实现这一点。

2个回答

Webpack 是一个通用的打包器,具有 React 之外的应用程序。之前create-react-app,网络上充斥着建立一个全新的 React 项目的示例,该项目使用 webpack 作为捆绑器。它非常灵活,可以处理包括和超出 React 应用程序所需的事情。它适用于 Angular、Vue、NodeJS 甚至 Web Assembly。

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

对于刚开始使用 React 的人来说,这自然会引起一些疲劳。

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

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

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

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

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

在性能方面,无论使用 react-scripts 还是 webpack,都应该是一样的。

只运行 webpack 的优点:

  • 完全控制您的环境

  • 可以轻松地进行自定义的事情,如服务器端渲染(仍然可以使用 create-react-app

  • 作为一项技能的 webpack 知识

仅使用 webpack 的缺点

  • 全权负责 webpack 的更新和维护(部分 webpack 版本不向后兼容或未来兼容)

  • 如果您正在尝试学习快速react,这可能会令人生畏,并且可能会令人头疼。

如果你想定制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