Tengo la siguiente situación.
En un proyecto, tengo un montón de activos creados con webpack 5. La estructura de carpetas se ve así:
assets/ ├─ node_modules/ ├─ dist/ │ ├─ some_css_r4ty.css │ ├─ some_css_rw4s.js │ ├─ some_img_r45t.svg │ ├─ some_img_zt1s.js │ ├─ index.js │ ├─ package.json ├─ src/ │ ├─ some_img.svg │ ├─ some_css.css │ ├─ index.js ├─ .gitignore ├─ package.json ├─ README.md //assets/package.json { "main": "./index.js", "exports": { "./some_img": "./some_img_zt1s.js", } }Ahora en otro proyecto de componentes con la estructura:
components/ ├─ node_modules/ ├─ src/ │ ├─ some_component.js │ ├─ index.js ├─ .gitignore ├─ package.json ├─ README.mdEn some_component.js estoy tratando de referirme a los activos ya incluidos. Una forma de hacerlo es consultar los archivos dist e importarlos como una biblioteca local. Y también agregue @local_assets_lib como externo en la configuración. Entonces puedo hacer:
//some_component.js import img from '@local_assets_lib/dist/some_img' //can also do import {some_img} from '@local_assets_lib' const comp = () => ( <img src={img}> </img> )El problema es que, si estoy tratando de hacer eso fuera de un módulo js, tengo que hacer algunos trucos en la configuración de webapck del consumidor para resolver esto. Lo hice pasando un mapa a la configuración del paquete web del consumidor: módulo de biblioteca de activos También podría copiar los archivos sin hash para dist y usarlos para hacer referencia en los archivos css y non js. Pero eso tiene problemas con el cdn si los activos cambian, así como el almacenamiento en caché.
Si uso la propiedad de resolución en el paquete web, simplemente intentará agrupar los activos en mi proyecto de consumo, y no quiero volver a agruparlo.
¿Alguna idea de como resolver esto?
Estaría feliz de reutilizar una declaración como
.class { background-image: url(import(@local_assets_lib/dist/some_img)); }o
.class { background-image: url(require(@local_assets_lib/dist/some_img)); }y deje que el paquete web obtenga la exportación predeterminada, que será la ruta al activo real, pero no encontré ningún complemento o resolución de URL para eso.