Adding images to /dist

[lorenzoid]

Prefacing this issue by saying that this is an awesome repo. Everything save for this issue has been relatively straightforward to come to grips with and understand! Cheers! @coryhouse!!

My issue is that I have a directory in src called images (src/images) which contain all my image assets. When I try to access these via the npm run start command, it works fine. I simply access the file like so:

<img className="auth-logo" src="images/joyglobal_logo.png" />

The issue is when I run npm run build... This path src/images does not seem to be accessed by the build task and dropped into the dist directory.

Any guidance would be tremendous!

[jeremyadavis]

I use copy-webpack-plugin to accomplish that task.

[coryhouse]

You don't need another plugin. It's already supported. :) I just added docs to the FAQ.

[jeremyadavis]

FWIW, my use case dealt with images and PDFs that were dynamically used so a standard import wouldn't work for me.

If your use case is similar, copy-webpack-plugin worked well for me.

[lorenzoid]

Thanks @coryhouse!

@jeremyadavis, thanks as well! Would you mind sharing an example? New to webpack so I wanted to know where to implement copy-webpack-plugin exactly.

[jeremyadavis]

My app hasn't kept with the latest slingshot releases so it wouldn't help to show my webpack, but you would just add the following to the end of the plugins array in webpack.config.prod.js:

new CopyWebpackPlugin([
                                            { from: 'src/assets' }
                                         ])

Just don't forget to npm install copy-webpack-plugin --save-dev and add import CopyWebpackPlugin from 'copy-webpack-plugin'; to the top of the file.

That said @coryhouse's example is the best way to handle it so try to stick with require/importing them if you can. There's a lot more webpack magic that can happen when using file-loader.