Tengo una biblioteca simple que exporta un componente <Image name="cat" /> . El componente usará el name prop para averiguar el valor src correcto para la <img /> subrayada.

Sin embargo, tengo problemas al agruparlo con el paquete web (o tal vez el problema en sí es que estoy tratando de agruparlo antes de publicarlo en npm). Aquí hay un código para pintar mejor una imagen:

 import cat from "../images/cat.png" import dog from "../images/dog.png" const images = { cat, dog } const Image = ({ name }) => ( <img src={images[name]} /> )

 { test: /\.(png|jpg|gif|svg)$/, use: [{ loader: 'file-loader', options: { name: '[path][name].[ext]' } }] },

Después de ejecutar webpack en mi biblioteca, el directorio dist/ contendrá un directorio con dog.png y cat.png . El código minificado transpilado tendrá referencias de cadena a ellos. Así que lo publico en npm.

Ahora, aquí está la parte que me atrapa. Cuando instalo el paquete publicado en mi proyecto y lo ejecuto, y consumo el componente <Image name="dog" /> , el img renderizado seguirá teniendo la ruta correcta ( /images/dog.png ), pero webpack-dev-server no se ha dado cuenta de que necesita procesar dicho archivo en el directorio público. Entonces, en el navegador, la URL no se resuelve en la imagen, sino en index.html .

Ahora, si en cambio importo la imagen directamente a mi proyecto como import dog from "my-library/images/dog.png , entonces webpack la procesa correctamente.

Puedo pensar en algunas cosas que estoy haciendo mal, pero en última instancia, necesito orientación:

1. No debería transpilar mi biblioteca a través de un paquete web antes de publicarla en primer lugar, si voy a consumirla a través de npm y un paquete web en el proyecto del consumidor.
2. La forma correcta de agrupar activos en una biblioteca es tal que el proyecto del consumidor debe importar el activo (png) para que el paquete web lo procese. Tratar de abstraer los activos de la imagen de la forma en que lo intento con el componente Image nunca funcionaría.
3. La configuración de mi paquete web es fundamentalmente defectuosa y me falta información sobre cómo cargar activos.

¿Cómo debo proceder?