Make all images file point to CDN using Webpack

Question

In Ruby on Rails you can just adjust a single line of code to make all the assets use an external assets server. Inside config/environments/production.rb you just uncomment a line:

config.action_controller.asset_host = 'XXXXXXXX.cloudfront.net'

So I would like to do the same on a react app. I have used s3-plugin-webpack to upload all the assets but I have having problem changing the url to point to the new images that have just been uploaded.

I work on a isomorphic React app so it render both on server and client side. So I don't looking to make the application run from the CDN.

Answer 1

Try configuring {output: {publicPath: 'https://cdn.foo.com/me'}} for your production builds. The URLs in the compilation should then point to the assets on the CDN.

Alternatively, you can configure cdnizer with the plugin which should transform all the URLs in the HTML files in your output.