在 create react app 中创建一个 bundle 文件

Creating one bundle file in create react app

我如何设置 Create React App 来制作单个 myApp.jsmyApp.css 文件,可以将其移动到我需要的任何地方?

背景: 在我的工作中,我们有两个需要更新的旧网站,并且在多页面网站中都有一个 React 应用程序。 React 应用程序使用 Create React App。不是我选择的配置,这只是我必须使用的配置,我无法更改所有内容。

目前,当我们对网站进行小的改动时,我们构建了一个捆绑包,采用 CRA 生成的最终 myApp.jsmyApp.css 文件,并将它们移动到网站期望它们的文件夹中是。

这样理解起来可能更容易一些。该应用程序在此处构建 .js|.css 捆绑文件:

../appA/someFolder/build/static/main.js and ../appA/someFolder/build/static/main.css.

然后将这些文件移至此处:

../appA/hostThisSite/someFolder/js/main.js and ../appA/hostThisSite/someFolder/css/main.css

对于第二个网站,它执行相同的操作,但将文件移动到整个其他网站结构

../../appB/hostThisSite/someFolder/js/main.js and ../../appB/hostThisSite/someFolder/css/main.css

目前我们需要更新 React 应用程序。为此,我需要解决新的 Create React App 在 /build/static/ 文件夹中创建一堆文件的问题(它们在名称中包含哈希值,而不是 myApp.jsmyApp.css。)

我做了研究,我唯一想出的是: https://www.labnol.org/code/bundle-react-app-single-file-200514 而且老板不想让我用gulp.

这是 create-react-app 中的一个已知问题,https://github.com/facebook/create-react-app/issues/5306 中提出的几个解决方案涉及使用 npm 包,例如 react-app-rewired 或 craco。

这个问题的另一个答案有两种可能的解决方案,一种是弹出,另一种是使用 react-app-rewired