Cómo usar un file de fragment de proveedor (package web) para proyectos de reacción múltiple

Tengo diferentes gits con diferentes aplicaciones de reacción. Donde cada aplicación debe usar el mismo file de bloque de proveedores con packages externos (React, ReactDOM …)

Configuración de proyectos:

Project 1 (git) /dist/... /src/... webpack.config.js Project 2 (git) /dist/... /src/... webpack.config.js Project N (git) ... 

Cada webpack.config.js contiene esta configuration pero con diferentes nombres de biblioteca:

 module.exports = { entry: { app: './src/App.ts', vendor: ['react', 'react-dom', 'react-networkingux', 'networkingux', 'networkingux-thunk'] }, output: { path: path.resolve(__dirname, "dist"), filename: '<Name>.bundle.js', library: "<Name>", libraryTarget: "umd" }, module: { /* ... */ }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }) ] } 

Problema:

Webpack crea un vendor.bundle.js especialmente para la biblioteca / proyecto actual, no para uso global, existe una opción para el package vendor.bundle.js que crea un vendor.bundle.js que se puede include en una sola página donde ambas aplicaciones se pueden cargar en function de Este file:

Ejemplo:

 <html> <head> <script src="/vendor.bundle.js"></script> </head> <body> <script src="/app1.bundle.js"></script> <script src="/app2.bundle.js"></script> </body> </html> 

Puedes usar el DllPlugin . Necesitaría un file de configuration de Webpack adicional, digamos webpack.vendor.config.js con las dependencies comunes, por ejemplo: 'react', 'react-dom', 'react-networkingux', 'networkingux', 'networkingux-thunk' . Este package estaría completamente desacoplado del rest de los proyectos.

Una vez que tenga esto funcionando, creará un manifest.json que se puede usar desde sus diferentes proyectos, por lo que no es necesario utilizar el complemento webpack.optimize.CommonsChunkPlugin , sino el DllReferencePlugin .

Con este enfoque, los files del package de los diferentes proyectos serán más pequeños, lo que significa times de compilation y reconstrucción más cortos.