Learn Webpack in React Js | A step-by-step Guide 2022 (Part-III)
Bringing Your Images to Life: Loading Images in React Js with Webpack
Note:
If you haven’t read the first two chapters of this “Learn Webpack In React JS” guide, I would recommend you to first read those before continuing on to this one. Because firstly, I think if you are new to Webpack, reading the earlier chapters will be a great learning experience, and secondly, we are continuing on with the code that we wrote in the earlier two chapters, and if you haven’t read those, then there is a bit you have missed already.
Recap:
In the last two chapters, we discussed the basics of webpack, and we followed through with a simple example that tells you how to set up webpack, webpack-cli and we got a brief overview for HtmlWebpackPlugin. We also learnt about the loaders and we successfully managed to build our scss files using the css-loader, sass-loader and style-loader.
Tutorial
Before we move on, let's look at our webpack.config.js file.
In the module.rules array in our webpack.config.js file, you can see that we are using an option named test. Webpack uses this for the regular expression to determine which files it should look for and serve to a specific loader. In this case, any file that ends with .scss will be served to the style-loader and the css-loader and sass-loader
Though this option is important, for this article we need to focus on another one.
Rule.type
Rule.typesets the type for a matching module. This prevents defaultRules and their default importing behaviors from occurring. For example, if you want to load a.jsonfile through a custom loader, you'd need to set thetypetojavascript/autoto bypass webpack's built-in json importingPossible Values:
'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/sync' | 'webassembly/async' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline'source: https://webpack.js.org/configuration/module/#ruletype
Though previously for our scss files we had to install and use css-loader, sass-loader, and style-loader, loading images in our build is not that complex. We can achieve that using Asset Modules
Asset Modules
Asset Modules is a type of module that allows one to use asset files (fonts, icons, etc) without configuring additional loaders.
Prior to webpack 5 it was common to use:
raw-loaderto import a file as a string
url-loaderto inline a file into the bundle as a data URI
file-loaderto emit a file into the output directoryAsset Modules type replaces all of these loaders by adding 4 new module types:
asset/resourceemits a separate file and exports the URL. Previously achievable by usingfile-loader.
asset/inlineexports a data URI of the asset. Previously achievable by usingurl-loader.
asset/sourceexports the source code of the asset. Previously achievable by usingraw-loader.
assetautomatically chooses between exporting a data URI and emitting a separate file. Previously achievable by usingurl-loaderwith asset size limit.
source: https://webpack.js.org/guides/asset-modules/
Ok, I think that is enough theoretical knowledge for now.
(even I feel bored now :)
To load images in our project build we need to add the following lines in modules.rules array in the webpack.config.js file
{
test: /\.(png|svg|jpeg|jpg|gif)$/i,
type: "asset/resource",
},So our webpack.config.js file now looks like this.
As you can see, we have defined a rule to pass the files with png, svg, jpeg, jpg, or gif extension to our asset/resource module. The rest is handled by this asset module.
And Hooray!! We are done. :)
Though it was just that simple, I thought that it was necessary to learn theoretical knowledge before we jump into the actual code.
In the next chapter, we will start writing actual jsx code and would try to achieve hot reloading for our application so that we can code faster.
