What is Webpack and How it works? II

Make sure to read this before proceeding - https://www.pansofarjun.com/post/what-is-webpack-and-how-it-works-i

Add any console log statement and click it on the dev tool like chrome, which will give you the browser's source code.

It will be a transpiled version and not the source code we did in index.js.

If we need source code, we want to set devtool property to 'source-map' in webpack config file.

Then restart the app.

Note: Make sure you check the box 'enable javascript maps' in your chrome dev tools settings.

You get the source code now.

Adding CSS:

Add index.css and import it in index.js.

Import it in index.js and then restart the app.

You will get this error.

So we need different loaders to load CSS into webpack just like javascript files need.

So what are the loaders?

npm i -D css-loader mini-css-extract-plugin

In the webpack config,

Add plugins and loaders.

Loaders are used to transform files as they are loaded into Webpack. They allow you to preprocess files and apply transformations such as transpilation, minification, or compilation of other file formats such as images or fonts

Plugins are used to perform more complex operations that go beyond the scope of loaders. They can be used to optimize your bundle, extract and manipulate assets, inject environment variables, or perform other advanced tasks.

So configure the webpack like this,

Note: Use the plugins property in the config file

Now the dist directory looks like this.

When you restart the app, it won't reflect on the HTML page. It is because the HTML page is not connected to the final CSS output from webpack.

So add

    <link rel="stylesheet" href="main.css" />

in index.html

Then restart the app.

Now you can see the color and background on the HTML page.

Let me clear this, sometimes I give npm run build and npm start --> essentially means 'webpack' and 'webpack serve' command.[See package.json scripts property].

As far as the 'webpack'(npm run build) command is concerned; it is used in a production environment.

As far as the 'webpack serve'(npm start) command is concerned, it is used in a development environment, and it is connected webpack-dev-server package.

So 'webpack serve' gives you a development server to work and automatically detects changes by hot reloading.

But both work on the same webpack.config.js file, so we must rebuild or restart.

Hot Module Replacement(HMR) vs. Live Reloading

Live reloading involves refreshing the entire page in the browser whenever a change is made to the code.

Hot module replacement is a technique that allows developers to see changes made to the code without refreshing the entire page. Instead, only the changed module is replaced in the browser, while the rest of the page remains intact.

I am using webapack 5.75.0, and by default, it enables HMR. You may be using earlier versions, so add a property hot and set it to true inside devServer.

Configuring React - JSX

We will install react and react-dom.

npm i react react-dom

We need a transpiler to convert JSX to JS.So install,

npm i @babel/preset-react

Add this preset in webpack config.

So now we will change the directory structure to react practices.

Change the index.js like this,

Note: I used React 18.If you use earlier versions of react, use ReactDOM.render() method instead of createRoot.

Refer: https://blog.saeloun.com/2021/07/15/react-18-adds-new-root-api.html

Since it takes an element with id = 'root' , we must include it in index.html.

Create a folder called src/components and create a file called App.js

This becomes react component since we use JSX inside the return statement.

Now give npm start, and you will find it working in the browser.

If we change the .js file to a .jsx file in react component, the same webpack won't work.

For example , change App.js to App.jsx and restart the app.

You will get this error,

It says it can't resolve '.components/App' because we changed to extension - .jsx.

So add this property in webpack config,

Now restart the app. Now you will get another error like this,

What we did before is to include .jsx extensions in the search process of webpack, but we didn't tell webpack / loader to have .jsx while loading.

So add this,

Now restart the app, and you will get the desired output.

I hope you get the basic idea of webpack config concerning React Js.

We will continue from here for the next part.