Javascript ReactJS项目，输出要在非ReactJS站点中使用的组件

我试图将ReactJS组件引入非ReactJS站点。我创建了一个项目，该项目捆绑了我的组件并缩小了它们（）

我有这个功能，但这意味着我的构建文件夹充满了单个JS文件。我想在其中定义某种文件夹结构，而不必为每个组件定义条目

下面是我编写Webpack.config.js文件的尝试

尝试1：

entry: {
    ComponentOne : './src/components/export/ComponentOne/control/ComponentOne.jsx',
    ComponentTwo : './src/components/export/ComponentTwo/control/ComponentTwo.jsx',
},

output: {
    libraryTarget: 'var',
    library: '[name]',
    path: path.resolve(__dirname, './build'),
    filename: '[name].js',
}, 

这种尝试意味着我必须为我想要导出的每个组件添加一个条目，我的构建文件夹将充满文件，我更希望有某种文件结构

尝试2：

entry: {
    '/ComponentOne/ComponentOne' : './src/components/export/ComponentOne/control/ComponentOne.jsx',
    '/ComponentTwo/ComponentTwo' : './src/components/export/ComponentTwo/control/ComponentTwo.jsx'
}, 

output: {
    libraryTarget: 'var',
    library: '[name]',
    path: path.resolve(__dirname, './build'),
    filename: '[name].js',
},  

此尝试将有助于我构建文件，但我将再次为每个组件定义一个条目，这将导致导出的JS文件中出现错误，因为变量名将变为：

var /ComponentOne/ComponentOne =

尝试3：

entry: glob_entries(path.resolve(__dirname, './src/components/export/**/control/*.jsx')),

output: {
    libraryTarget: 'var',
    library: '[name]',
    path: path.resolve(__dirname, './build'),
    filename: '[name].js',
},   

使用“webpack glob entries”解决了我不必定义每个条目的问题，但我仍然面临着构建文件中充满单个JS文件而没有文件结构的问题

---

我希望我的构建文件能够保留组件的文件结构，但仍然能够使用类似于“webpack glob entries”的东西，而不必定义每个条目。

如果不希望捆绑，为什么要使用捆绑程序？@Hamms我是webpack的新手，我可能做错了，我试图将React组件包含在一个要从javascript使用的函数中。如果你能给我指出另一种方法，我将不胜感激。你几乎肯定想用一种工具而不是webpack来实现你想做的事情，但我不清楚你到底想做什么。您提到您的目标是捆绑和缩小您的组件，但我认为您实际上不想捆绑它们（因为捆绑是将所有组件组合到一个入口点的行为）。你可能是指transfile和minify？或者你只是想缩小？所以我有一个文件，作为普通的react组件，另一个文件在函数中呈现react组件。然后我想（捆绑/传输/缩小？）这个文件。然后我将在一个单独的网站中引用这个文件，以从javascript函数中呈现组件