loading...

Explain like I'm five: Webpack

zasuh_ profile image Žane Suhadolnik ・1 min read

Been hearing and reading about it everywhere, but I don't seem to get why it's so important to bettering development.

If someone could explain that would be amazing. :)

Discussion

markdown guide
 

Recently also got into Webpack and found it hard to find simple explanations. So here goed my take:

Webpack is essentially just a bundler. It bundles your code: CSS, JS and others to 1 or 2 files (you can decide which and what it contains) into 1 bundle.js file. It can also compile Typescript to Javascript, LESS/SASS to CSS and so on. You use loaders and modules for this. You define all these setting in your webpack.config.js. There you say: "Use this plugin" or "Use this loader and if it doesn't work; fallback onto this one".

Combining all code to 1 or 2 bundles save up on space. Which is a good thing of course because less loading. Other bonus point: I don't have to rely on Codekit as a compiler anymore. I just run npm run watch (which is a webpack command you can configure to your own liking) and it will compile my code and watch for changes.

I can't find the tutorial I used right now, but I suggest you look for webpack 3 tutorials on Medium: plenty of simple step-by-step walkthroughs there.

Good luck!

 

Does the bundling happen at run time? or a one-time process?