Bundling image assets

The static image file that we imported into the Home component view must also be included in the bundle with the rest of the compiled JS code so that the code can access and load it. To enable this, we need to update the Webpack configuration files to add a module rule to load, bundle, and emit image files to the output directory, which contains the compiled frontend and backend code.

Update the webpack.config.client.js, webpack.config.server.js, and webpack.config.client.production.js files to add the following module rule after the use of babel-loader:

[ …    {       test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,       use: 'file-loader'    }]

This module rule uses the file-loader npm module for Webpack, which needs to be installed ...

Get Full-Stack React Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.