Intro to Webpack
Webpack bundles multiple JS files into one file. It also has modules and plugins you can, well, plugin to the library to do other things such as convert ES6+ code to es5, or transpile LESS to CSS etc.
So, if you would like to write more modular code— code that is broken across multiple files for resuability, readability, and/or maintain ability (i.e. you don’t want to dig through one file and 1000 lines of code, when you could divide your code into multiple files)—then webpack is perfect.
WebPack is not just a module compiler, it is also capable of performing a bunch of operations, say, linting or testing, for which you would generally need other tools. Besides, WebPack supports stylesheets, html, etc. There’s also Hot Module Replacement tool which allows checking your progress without a full reload of your applications.
Webpack has some fundamental concepts Entry , Output , Modules, Loaders and Plugins.
- Entry : The first JS file in the reference links.
- Output : The final bundle you want to consume.
- Modules : Pre-processing logic before bundling process.
- Loaders : They are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them.
- Plugins : Post-processing logic after bundling.
What are the advantages of using Webpack
- It helps you bundle your resources.
- It can convert inline images to data URIs. allows you to use require() for CSS files.
- It can run a development webserver.
- It can handle hot module replacement.
- It can split the output files into multiple files, to avoid having a huge js file to load in the first page hit.
- It can perform tree shaking (Tree shaking means removing “dead code” from the bundle you ship to your users ).
Alternatives of Webpack
Brunch is an assembler for HTML5 applications. It is a simple but powerful build process and pipeline. It’s agnostic to frameworks, libraries, programming, stylesheet & templating languages and backend technology.
Esbuild is 10-100x faster than another bundlers. The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way.
Interested in reading more such articles from Kushagra Sharma?
Support the author by donating an amount of your choice.