What is WebPack?

What is WebPack?

WebPack is a JavaScript bundler, allowing to turn our messy and numerous JavaScript into a single minified and optimized script. 

WebPack is good for figuring out module dependencies, making it easier for developers to organize code structure and reuse modules/components among multiple entry points

WebPack Config : Entry Point & Output

Basically, we give WebPack a starting point, then WebPack figures out its own dependency tree, gathers all these dependencies, and builds a bundle.

With this config, WebPack will start from entry.js, figure out its dependencies and build a bundle, named bundle.js in the /dist folder. The “context” is a base directory to resolve the “entry” option. It must be an absolute path.

WebPack Config: Multiple Entry Points & Outputs

WebPack also supports building multiple bundles for multiple HTML pages (entry points).

With this config, WebPack will build three bundles with the name as the “key” value of each entry.

So the outputs will be:

 /dist/a.js, /dist/b.js, /dist/name_c.js

WebPack Config: Loaders

What are Loaders?

• Loaders are transformations that are applied to a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source.

• WebPack enables the use of Loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. 

• Loaders are activated by using loader name! prefixes in require() statement

Now, does WebPack only work for JavaScript assets? What if the files have dependencies on css, less, jpg, svg, and so on?

Not to worry: WebPack supports other asset types by using Loaders

Sample Config:-

With this config, if WebPack encounters any HTML, js, CSS, images, or fewer file dependencies, it will preprocess the files using the loaders, which are specified in the JSON object, and put them in the bundles.