Javascript 从webpack和create React app创建的React小部件仅公开webpackJsonpclient

我有一个react应用程序，它是从create react app（我们称之为app-1）创建的，我需要在其他团队拥有的另一个web应用程序中使用它。商定的方法是将React应用程序捆绑为库，并将其部署到CDN，然后通过脚本标记将其用于其他项目

我做了以下几件事。 1.在root中创建了一个webpack.config.js文件（没有从CRA中弹出），并使用了以下配置

const path = require('path');
const glob = require('glob');

module.exports = {
  entry: {
    'bundle.js': glob
       .sync('build/static/?(js|css)/?(main|2).*.?(js|css)')
       .map(f => path.resolve(__dirname, f)),
     },
  mode: 'production',
  output: {
    filename: 'app.js',
    library: 'APP-1',
    libraryTarget: 'umd',
  },
 module: {
   rules: [
   {
     test: /\.css$/,
     use: ['style-loader', 'css-loader'],
   },
 ],
 },
};

该条目读取通过运行npm run build（CRA命令）生成的绑定js（main.js和2.hash.js）和css文件。其思想是将它们组合成一个文件，然后作为lib输出

然后将生成的捆绑包加载到CDN中，并将其添加为另一个项目中脚本标记的源。现在，在另一个项目中，我可以访问窗口对象上的“APP-1”名称空间——但奇怪的是，它只公开webpackJsonpclient对象

例如：console.log（“模块：”，APP-1）或console.log（window.APP-1）

不确定发生了什么，也不知道如何进行调试。下面是index.js文件

从“React”导入React；
从“react dom”导入{render，unmountComponentAtNode}；
从“/App”导入{App}；
//ReactDOM.render（，document.getElementById（'root'））；
导出常量init=（）=>{
log（'这是来自APP-1应用程序'）；
返回{
挂载（）{
const el=document.getElementById（'app-1'）；
渲染（，el）；
},
卸载（）{
const el=document.getElementById（'app-1'）；
如果（el）卸载组件节点（el）；
},
};
};