Starting webpack… the in’s and out’s : Part 1

Fiddling with ReactJS had been fun, as create-react-app did all my dirty work for me. All I had to do was run $ create-react-app _Project name_ and viola, I had a ready-made react app to work around with.

But some of my fellow developers were doing it without that, being a big fan of abstraction, I didn’t care, until I had an interview and there I was asked about something along the lines of webpack. I was able to avoid that issue but I realised that the world of abstraction can prove to be fatal if applied everywhere. So here I am sharing my experience as I learn to use webpack.

I learned that webpack is more or less like gulp/grunt. I might me wrong let’s keep moving. I’m writing this up as I learn.

$ mkdir webpack && cd webpack
$ npm init //go though the process there.

Next we are going to install webpack

$ npm i webpack --save
$ touch webpack.config.js //this file is where we do the configuration

Inside the package.json

"script" : {"build" : "webpack"}

Inside the webpack configuration we need to have an entry file which we will have to make lets say its inside src/index.js

//config file
module.exports = { entry : "./src/index.js",
                   output : { "filename" : "bundle.js" }
                 }

Let’s make that index.js file that we will run,

//index.js
console.log("This is webpack learning experience");

Now if we go to the terminal and run npm build , we get a bundle.js which has a lot of boilerplate stuff and essentially, our console.log :)