As we said in Part 1, babel is gonna make our modern code compatible with the old browsers -in case the user is using an old browser-, so let’s install it. If your terminal is watching the code, press
Ctrl + c to kill it and then run this command:
npm install -D babel babel-loader @babel/core @babel/preset-env. But, that’s not enough. We should tell webpack to use babel when compiling our code. Here comes the mission of
webpack.config.js. Add the following lines to
webpack.config.js inside the exported module after the
output property and make sure to add a comma at the end of that property:
Now run again
npm start and everything should work perfectly.
Installing css-loader and style-loader:
What if we want to add styling to our project? Well, first of all, we need to create a css file. let’s do that. Inside our
src folder create a new file and call it:
styles.css. In order to let webpack bundle our stylesheet too -which is a good practice-, we need to install
style-loader. Kill the terminal by pressing
Ctrl + c and run the following command in order to install these 2 loaders:
npm i -D css-loader style-loader. Now again we need to tell webpack to use these 2 loaders. Add the following object to the rules array we added before (and again don’t forget to add the comma at the end of the last object):
use: ['style-loader', 'css-loader'],
Now let’s import our stylesheet into our
index.js file. Type at the very top of
import ‘./styles.css’;. Inside
styles.css change the background of the page:
Now run in the terminal
npm start and refresh the page, You should see a new background colour instead of the default white one.
Let’s celebrate 🥳. Styling our code without linking any stylesheet in our HTML file is an accomplishment, isn’t it??
Using Asset Modules to load our images:
Great, now let’s try to change the background. Instead of using colour, I want to set an image. I already downloaded one, if you want you can download it from here, or download any image you like from Google. Create a folder in the
src folder, call it:
images and add that image to it. Let’s get back to
styles.css and add this new code instead of the last one:
background: url('./images/<your image name.its extension>');
Don’t forget to change
<your image name.its extension> to the actual name of your image,
background: url('./images/bg.jpg'); in my case.
If you’ve killed the terminal, run
npm start again. You notice an error right??
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. From this line, you can understand that
webpack needs a new loader to process the images. However, as of webpack 5, using the built-in Asset Modules we can easily incorporate those in our system as well. Add these lines of code to the rules array in the
Now simply import the image into your
import './images/<your image name.its extension>';. Kill the terminal and run it again. Refresh the browser and BOOM. There it is. Your project background is now changed.
With this boilerplate, you’re able to create different JS files and import them via this command
import nameOfTheModule from 'pathOfTheModule'; into the index.js, and the whole code will be bundled into one single JS file 😉
It was quite a long journey, but you did it. Congrats.
If you want to use it, here’s the source code for this tutorial.
I hope that you got benefited from this tutorial. Thanks for your time and see you in the next articles 😊