Estoy desarrollando una biblioteca de mixins de Vue, quiero poder importar mixins de estas dos formas desde esta biblioteca:
// import type A import { Theme } from 'awesome-lib/mixins'y
// import type B import Theme from 'awesome-lib/mixins/Theme'para el tipo A de importación, tengo 1 entrada en el archivo de configuración de mi paquete web:
output: { path: path.join(__dirname, '/dist'), filename: '[name].js', libraryTarget: "umd", globalObject: 'this', }, entry: { mixins: './src/mixins.js',y para el tipo B de importación, creo una entrada separada para cada archivo en el directorio mixins, así:
entry: { // other entries ...glob.sync('./src/mixins/*.js').reduce((entries, file) => { const p = path.parse(file) entries[p.name] = { import: file, filename: 'mixins/' + p.base, dependOn: Dependencies[p.name], } return entries }, {}),Como es visible, este método tiene un inconveniente, necesito establecer dependencias entre las entradas manualmente para el paquete web o duplicará el código compartido en paquetes separados. He buscado acerca de la agrupación de fragmentos en función del archivo , pero no pude encontrar cómo. He experimentado con optimización.splitChunks sin suerte. y una pregunta: si logro configurar webpack para agrupar por nombre de archivo, ¿puedo cargar ese archivo solo en otro paquete?
Esperaba que con la configuración correcta pudiera lograr ambas salidas con solo 1 entrada y división de código