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 :)