Webpack Build Issue - Static Images in public Folder (React Project)

[yuriikinakh5]

Body

In my React project with a custom Webpack setup, images stored in the public folder render correctly when running npm start. However, after building the project for production with Webpack, those images are no longer available or return 404 errors.

How should I properly handle static images in the public folder so they are included and accessible in the production build? Should they be copied during the build process, or is there a recommended best practice for this scenario.

Guidelines

• I have read and understood this category's guidelines before making this post.

[ye231101]

Hey

[yuriikinakh5]

Hi ye231101

Can you help me?

[ye231101]

I've already solved that issue.

Please check this code: https://github.com/ye231101/viewpro-widget

[yuriikinakh5]

There is no static images.

[ye231101]

Oh, sorry, I removed that issue.

[ye231101]

This happens because webpack-dev-server serves the public folder in development, but Webpack does not automatically copy it into dist during a production build.

You have two common solutions:

✅ Option 1 (Recommended for true static files): Use copy-webpack-plugin

If the images should stay in public and not be processed by Webpack, install:
npm install copy-webpack-plugin --save-dev

Then configure Webpack to copy the public folder into dist during build. This ensures the images exist in production exactly like they do in development.

This is the correct approach for:

• Favicons
• Static images
• Robots.txt
• Files that should not be hashed or transformed

✅ Option 2 (Recommended for app assets): Move images into src

Move images into src/assets and use Webpack 5 asset modules (asset/resource).

This allows:

• Hashing for cache busting
• Optimization
• Automatic inclusion in build output

This is better for:

• UI images used inside components
• Images imported in JavaScript/React

[yuriikinakh5]

Thank you.