Full-Stack React Projects - Second Edition

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 and add a module rule to load, bundle, and emit image files to the dist 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 so that you can 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 node module for Webpack, which ...