Webpack Article

Introduction

Webpack is an open-source JavaScript module bundler. It is a module bundler primarily for JavaScript, but it can transform front-end assets iike HTML, CSS, and image if the corresponding plugins are included.

Webpack takes the modules with dependancies and generates static assets representing those modules.

Webpack was developed by a number of different developers and is still being updated by contributors to this day. It was initially released in March, 2012 and is written in JS.

Features

Webpack resolves against any file type - It will resolve each module it encounters while constructing the dependancy graph. If an entry contains dependancies, the process will be performed recursively against each dependency until the traversal has completed. Webpack can perform this process against any file type, unlike specialized tools like the Babel or Sass compiler. It can also give you control over how to treat different assets it encounters.

Webpack is configuration driven - At its core, webpack relies on configuration. The configuration model can feel a bit opaque at times as the configuration file can appear monolithic. It can be difficult to understand what webpack is doing unless you know the ideas behind it.

Code Splitting - Webpack allows you to split code in various ways. You can even load code dynamically as your application gets executed. This sort of lazy loading comes in handy especially for broader applications, as dependancies can be loaded on the fly as needed. Even small applications benefit from code splittig, as it allows the users to get something useable in their hands faster. Performance is a feature, after all. Knowing the basic techniques is worthwhile.

Hot Module Replacement - In conjunction with using ReactJS, HMR allows the application to maintain its state without forcing a refresh. While this does not sound all that special, it can make a big difference in practice.

Minification, bundling, removing dead code, asset management, organising code, etc...

Pros/Cons

Webpack has its pros and cons:

Pros	Cons
Rich and flexible plugin infrastructure - Plugins and loaders are easy to write and allow you to control each step of the build, from loading and compiling CoffeeScript, LESS and JADE files to smart post processing and asset manifest building.	Config file may be hard to understand - Due to a somewhat hard to grasp syntax, configuring Webpack may take some time.
ES6 module support - Webpack supports ES6 modules and their import and export methods without having to compile them to CommonJS require.	Cannot load files discovered during runtime.
Can create a single bundle or multiple chunks loaded on demand, to reduce initial loading time - Webpack allows you to split your codebase into multiple chunks. Chunks are loaded on demand. This reduces the initial loading time.	Other webpacks require no configuration - Parcel is a web application bundler that requires zero configuration.
Share the same modules' client-side and server-side - Because Webpack allows you to use the same require() function as node.js you can easily share modules between the client-side and server-side.	Not the fastest - Grunt an altnerative, has a task runner that can make the processes easier, such as minification, compilation and unit testing.
Webpack can analyze the content of JS during compile time, thus providing more info for optimization.	The developer must define all entry points, one per page or view, in the configuration.
Referencing classes is similar to doing it in C# or PHP.	JS must be modular for both applications and third-party plugins.

Extra Programs

Related programs to Webpack:

Alternatives to Webpack - Grunt, Parcel, Rollup.
Linters and formatters - JSLint, Prettier, ESLint.
Front End Web Frameworks - ReactJS, VueJS, Angular
CSS Frameworks - Bootstrap, Materialize CSS, Semantic UI.
CSS Pre-Processors - SASS, PostCSS, Less.
Other - Web Design Practices, Visual Studio Code etc...

Sources

Summary

In conclusion:

Webpack is useful for managing your JS code and other web codes (such as CSS and HTML) into separate modules. This can help organise your code in the long run and helps weed out code your don't need as well as minifying your code. However, there alternatives out there that can do a better job but are less known, such as Grunt and Parcel, Grunt also has a task runner. It is also recommended that your JS code is modular if you are using third-party plugins as well as the applications so it isn't all that perfect, but a good a tool to have.