hola, anulo el paquete web de create-react-app, en un archivo override-webpack.ts separado.
lo que hago es:
build/static/jsbuild/static/cssbuild/static/media ** NO se copian todas las imágenes de la carpeta de assets . Las que se usan en los componentes de reacción se ignoran, así: <img width="34 src={${url}/img/car.svg} alt="car" />
Contexto:
Entonces, todos los archivos js y css están agrupados correctamente.
Mi problema es que las imágenes (png, svg) de src/assets/img se copian en build/static/media , son solo las que se usan en los archivos scss , y NO desde dentro de mis componentes de reacción, estas imágenes son ignorado ( como muestro arriba ), y eso es lo que busco, cómo incluirlos también en la carpeta de compilación
mi override-webpack.ts es así: .
var configurator = { paths(paths) { // paths }, webpack(config, env) { //if stage, prod, dev bundleSass() addMedia() overrideOutput() return config; } } module.exports = configurator; // overrride the publicPath of the bundles, so to have it into index.html function overrideOutput(config) { config.output.filename = 'static/js/[name].[hash:8].js'; config.output.chunkFilename = 'static/js/[name].[hash:8].chunk.js'; config.output.publicPath = `http://www.something.com/`; // this is added into index.html } // copy images to build/static folder, i was hoping to copy the fonts as well but it does not.. // this functionality ONLY copies the images that are called into the css files, // it IGNORES the images that used into react components, // like: // <img width="34 src={`${url}/img/user.svg`} alt="user" /> function addMedia(config){ const media = { test: /\.(woff(2)?|ttf|eot|svg|png)(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'static/media', // by default it creates a media folder } } ] }; config.module.rules.push( media ); // push the rule to the module array } // bundle scss files function bundleSass(config) { // add rule for the sass-loader, so to bundle the scss files } Cualquier sugerencia de por qué las imágenes del interior de los componentes de reacción no se copian en la build/static/media es bienvenida.
El problema es que no estás importando las imágenes usadas en React, sino que solo estás vinculándolas. Intente importar y usar archivos de imagen así:
import CarImage from '../../img/car.svg'; // further down in the component <img width="34 src={CarImage} alt="car" />Ahora el paquete web debería reconocer las importaciones y escribir los archivos.