Webpack and Babel

Toady I am going to talk about webpack and babel. They are things that as Javascript programmers we use every day and maybe dont pay too much attention to. But they are very important for what we are doing with coding. Webpack and Babel are essential for modern programming. Sometimes with javascript when we are writing out some app or webpage would have in our index.html a whole bunch of scripts at the beginning of the code. We want to source files that are our own or external helpers for our code to run. This can be not only annoying and time consuming, but inefficient for our code. A lot of these sources would need to be loaded separately which would decrease performance.

Webpack is a bundler. As the name suggests we bundle all our sources together into one file and we no longer need all these script tags. Now we dont need to worry about multiple issues coming up and from where with all our script tags, it will all be gathered from one source. Also webpack will compress the files and make the code easier and cheaper to manage.

So we generally dont pay too much attention to webpack because things like create-react-app will have it all pre done for us and our package.json is ready to go with the basic package. However, without this it is not too hard to get a webpack up and running. First you need node, and once you have node you can use the node package manager to install webpack.

Then you would want to run webpack and attach it, most likely, to your root file. Then when you run your program webpack will run with it and bundle what you need.

Now when you want to use webpack or add things to your webpack it is quite simple. Using webpack can be done in a variety of different ways. We use it all the time without even thinking about it (or at least I do). Any time you might be trying to use an image

...and you use require, you are using webpack. You might remember using this require() function with many things, such as modules, or as I showed in the image, images. If you are coding in node, I am sure you are familiar with requiring axios. For me it is similar to using import with react files.

Now another one that comes up often when talking about webpack is something that is actually a part of webpack. Babel. Babel happens to be important enough of a part of webpack that it often gets its own mention. It is very important. Babel is a compiler for Javascript. One of the things that it will do is make your fancy javscript code work like older javascript code if it has to. All that cool ES6 syntax doesnt always work with old environments and browsers, but we luckily decided as coders to find a way to automize this instead of having to watch out for this always ourselves. Babel will convert ES6 code to older versions automatically for us.

Not only that, but while using react, we (ok maybe just me) take JSX for granted. We (I) just know that it works and we run with it. But really its thanks to Babel. Babel understands how JSX can be converted and will make it converted to javascript in the browser. Essentially babel will translate all our code to make it functional with whatever environment we might want to use. Thanks for reading.