在同一页面上加载多个反应应用程序，在反应脚本中覆盖 webpack 输出 jsonpFunction

Question

我有一个主要的反应应用程序，其中基于选定的服务，我正在将另一个反应应用程序动态加载到第二个根。我正在加载的第二个应用程序使用下面的 webpack.config 捆绑...

const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const glob = require("glob")

module.exports = {
  entry: {
    "bundle.js": glob.sync("build/static/?(js|css)/*.?(js|css)").map(f => path.resolve(__dirname, f)),
  },
  output: {
    filename: "build/bundle.min.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new UglifyJsPlugin()],
}

然后通过下面我的 package.json 中修改后的 npm run build 命令在构建过程中调用它。

"build": "npm run build-sass npm run build:react && npm run build:bundle",
"build:react": "react-scripts build",
"build:bundle": "webpack --config webpack.config.js",
"build-sass": "node-sass --precision=5 --indent-type=space --output-style=nested --indent-width=2 src/styles/Site.scss src/styles/Site.css",

这种方法有几个问题，我发现这归结于在同一文档上托管多个 React 应用程序和如何在同一页面上运行多个 webpack 实例......并避免任何冲突的 文章中的 react-scripts jsonpFunction 。

尽我所能遵循他们的建议，我尝试向构建命令添加参数，如下所示

"build:react": "react-scripts build --jsonpFunction=othername"

和

"build:react": "react-scripts build --output jsonpFunction=othername"

以及其他不会使构建失败的方法，但我设法让它以任何方式实际工作的唯一方法是进入 react-scripts 并直接修改 webpack 配置。

由于我需要这些其他项目做的事情的性质，我无法弹出项目并且需要坚持使用 react-scripts，所以有人知道在 react-script 的 webpack.config 中覆盖此设置的方法吗？

编辑：我发现一个挂起的拉取请求可能会在修改时解决这个问题，但它似乎处于停滞状态，一个解决方法会很好

Answer 1

找到了目前最接近答案的内容。在最新版本的react-scripts（撰写本文时为3.1.1）中，构建过程使用package.json中的name参数来使jsonpFunction唯一（假设您没有加载具有相同名称的项目）。

唯一的缺点是，在此更改中，捆绑过程不会将函数放在窗口上，而是将其放在“this”上。因此，当主应用程序在窗口上使用 jsonpFunction 引导应用程序时，我需要对捆绑输出进行查找和替换，以查找this["webpackJsonp{projectName}"]并将其替换为window.webpackJsonp{projectName}.

一个完全可行（如果不是有点肮脏）的解决方法。