React App with Webpack from Scratch

Why should we use webpack? 

What it does to our application? 

All basic answers of these questions are in my previous blog. Go through it and now comes the part of implementation. 

Implemented code is on my github.

How can we configure the webpack in application from scratch. 

So Let’s get started with the code without wasting much time on theory. For that what you can do and can’t is already there in official website. 

For starting we have used yarn this time for faster performance.

yarn init

Then add basic requirements for react libraries by following command.

yarn add react react-dom react-router-dom

These will be dependencies we’ll be requiring to code in react & routing. 

Now comes the webpack part, hence let’s discuss & implement which dependencies are required with the use of each.

yarn add webpack webpack-cli webpack-dev-server -D

Here, -D is for devDependencies so it will be installed only for development. I have given default development environment & given my webpack configuration file. 

Now, Before you do anything add folders src in root directory, create index.js and app.js inside it then create index.html and webpack.config.js in root directory.

Now, webpack-dev-server is providing live reloading (see — watch in script) and it can be used with scripts in package.json.

“start”: “NODE_ENV=development & webpack-dev-server — config webpack.config.js --watch”

In app.js, create simple react component and import the same in index.js to render it.

Let’s start with webpack.config.js file. 

you need to give entry point in it to let server know from where it can start compiling. Here, we have rendered our App component in index.js file and from exact path , I want to start executing it. 

then comes the output — where it should store files of output is mentioned here as it will generate bundled file and you can give whatever name you prefer. I have given bundle.js to not create any fuss about names.

Now, you have already added script, created component and given appropriate entry point. And if you try to run this using yarn start, it will not render the component and will provide errors.

Module build failed (from ./node_modules/babel-loader/lib/index.js):SyntaxError: Unexpected token (7:2)

So, let’s discuss reason behind this and see what we have not done till now.

React code is written in es6 format and to convert it into compatible version and understand browser — we need to use babel. 

Install it by following command :

yarn add babel babel-cli babel-core babel-loader babel-polyfill -D
yarn add babel-preset-es2015 babel-preset-react babel-preset-stage-2 -D

Create .babelrc file in root directory and add following code :

{
   “presets”: [“react”,“es2015”,“stage-2”]
}

babel

Babel is compiler to run code in three stages : parsing, transforming and generation. So basically it translates code that is written in es6/es7 into es5 code so that any modern browser can interpret it.

babel-polyfill

The polyfill will emulate ES6 environment. Since we are using ES6 in our app, we need to include this so that we can use Promise, Object.assign, Arrow functions and all other features.

Make sure it is called before all other code statements.

You can do it in two ways either import it before your main component like below.

import ‘babel-polyfill’; //es6 syntax

Or, in webpack config file, you can add before entry point as follow:

entry: [“babel-polyfill”, “./app.js”]

In my repo, I have imported it before my main component.

preset-env

We also need to tell babel to transpile ES6 code to es2015 code and we have done using es2015 preset. In .babelrc, this is how we have done. Also we have to setup for react and for that, we have added babel-preset-react as dev dependency and added it in our file.

Now, question will be what is stage-2?

In Babel, there are 4 different stages and each presets requires the later preset hence we have installed dependency of babel-preset-stage-2 and added it in .babelrc.

“presets”: [“es2015”, "react", "stage-2"]

babel-loader

We have made files using .jsx extension which is extensible javascript files. We need to use babel-loader to transpile code using given presets (explained before).

In webpack 4 and upper versions, we need to define some rules and inside that, configure the babel-loader.

One more thing I have done in webpack is, created aliases for folders. 

Reason is when you want to import any file in another, you have to mention whole path from the file’s path. 

So making alias for each it easier thing to do and it can be done by Resolve.alias

Now, I have made routes for different pages and once you make route file and give it to render into DOM, It won’t show you another component on route change and the reson behind is we have used react-router v4 and haven’t added historyApiFallback.

devServer: {
   historyApiFallback: true
}

Now, Routing will work like charm !!

These are basic webpack configuration we need to do before starting application level implementation. 

Also, you can generate build by running following command & use it for production:

yarn build 

Code is here. 

Do share your thoughts/queries.