He escrito una aplicación React que tiene una versión independiente y una versión integrada. La diferencia es que la versión incrustada pierde algunos componentes y hace mucha carga diferida (tiene un tamaño muy reducido en comparación con la versión independiente). Debido a la carga diferida, la versión integrada genera muchos archivos js. Ahora, lo que estoy tratando de lograr es que cada vez que construyo mi (s) proyecto (s), crea dos carpetas;

• build/standalone => todos los archivos JS necesarios para importar la aplicación independiente en cualquier proyecto html
• build/embedded => todos los archivos JS necesarios para importar la aplicación integrada en cualquier proyecto html

¿Cómo podría hacer esto?

paquete web.common.js

 module.exports = { entry: { standalone: path.resolve(__dirname, '../src/index.standalone.tsx'), embedded: path.resolve(__dirname, '../src/index.embedded.tsx') }, resolve: { extensions: ['.tsx', '.ts', '.js'] }, output: { path: path.resolve(__dirname, '..', './build'), filename: '[name].[contenthash].bundle.js' // I know I could do ./[name]/[contenthash].bundle.js but this also results in folders for chunks }, optimization: { runtimeChunk: 'single', splitChunks: { chunks: 'all' } }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, '..', './public/index.html') }) ] };

Lo que recibo ahora mismo, que no es lo que quiero;

Con esto, es casi imposible saber qué archivos necesita, por ejemplo, implementar la versión integrada en mi página web.