Webpack for React js
What is webpack?
Webpack, at its core, is a code bundler. It takes your code, transforms and bundles it, then returns a brand new version of your code.
What problem it's solving?
Think about how many times we have to take our code and change it so it's compliant with what the browser is used to (vanilla HTML, CSS, and JavaScript). If you've ever used a CSS Preprocessor like SASS or LESS you know you need to transform your SASS/LESS code into normal CSS.
Webpack really shines is you're able to tell it every transformation your code needs to make, and it will do them and output a bundle file for you full of those changes (and some other helpful things as well like minification if you desire).
Three things webpack should know
- webpack needs to know the starting point of your application, or your root JavaScript file.
- webpack needs to know which transformations to make on your code.
- webpack needs to know to which location it should save the new transformed code.
The first thing we need to do is create a file which is going to contain our webpack configurations. Conveniently, this file should be named webpack.config.js and be located in the root directory of our project.Now that we have our file made we need to make sure that this file exports an object which is going to represent our configurations for webpack.
webpack.js.org
