“Necessity is the mother of invention”
The above quote is a great way to express why webpack exists. But we should go back, way back, to when JavaScript was not the cool new thing. The time when a webpage was just a tiny package of good old.html, CSS, and possibly one or a few JavaScript files in certain instances, to understand it properly. But all of that was about to change eventually.
What was the issue?
The entire development community was dedicated to promoting the general user as well as developer experience when it came to using and developing javascript/web applications. As a result, many new libraries and structures have been released.
Over time, some design patterns emerged to provide developers with an improved, more strong, and still very straightforward way to write complicated JavaScript apps. Websites used to be nothing more than a small package containing an odd quantity of data. With the emergence of JavaScript modules, they stated that they were becoming heavy, as writing contained tiny bits of code was the new craze. All of this ultimately reached a point where the entire application package had 4x or 5x the number of files.
Code Mismatch
Not only was the application's total size a struggle but there's also a significant gap between the type of code developers were composing and the type of code browsers can comprehend. To ensure that browsers could perceive the code in their bundles, developers used a lot of helper code called polyfills. Webpack was designed to address these problems. A static module bundler is Webpack.
What is a webpack?
You've probably heard the term "webpack" before if you're working on a javascript - based application. Webpack is a static module bundler for JavaScript applications that takes all of your code and turns it into something that can be used in a web browser. Modules are reusable bits of code made up of JavaScript, node modules, images, and CSS styles that are bundled and ready to use in your website. Webpack divides your code into modules based on how it's used in your app, making it much easier to handle, debug, confirm, and check your code.
How did Webpack solve the problem?
In a nutshell, Webpack goes through the package and generates a dependency graph, which is a collection of various modules that your web app will need to function properly. Then, based on this graph, it generates a new package with the minimum level of files needed, which is mostly just a standard bundle. js file that can be easily inserted into the HTML file to be used in the application.
What are the principles of webpack?
Webpack consists of five principles:
Entry
The application's entry point is called entry. This is the first module (JavaScript file) Webpack will process to complete the dependency graph. The files that are shipped into the entry will be examined and introduced to the dependency graph. It then proceeds to walk through all of the imported files till all the code required to operate the applications has been found.
Webpack determines which other components are internally and externally depending on the entry point. In modern JavaScript apps, the default entry point is.', but this can be changed to any file you want. There is also the option of having multiple entry points.
Output
The output part is where the files will be written to disc, along with their names. ' is the main output file, and every other file is placed in the dist folder. The output is located in the same place as the entry point. The material of the output can also be hashed or chunked, allowing it to be constantly modified as the code changes. This ensures that the appropriate code is served.
Loaders
The goal of webpack is to compile all of your dependencies, which contains not only code but also other assets, into a dependency graph. Since bundlers can only manage JS files, webpack must preprocess all other files but also assets before they can be grouped. This is where the loader arrives. Webpack can broaden its functionality by transforming other file types into modules for the application using Loaders.
The loaders are clarified in the rules section of the module key. To add a loader, you'll need two configuration settings: test, which recognises which files or data formats should be converted, and use, which informs Webpack which loader to be used to convert these files. Loaders could also be used from the command line in conjunction with import declarations.
Plugins
Plugins take care of the extra tasks that a loader can’t manage. This involves things like bundle optimization and setting environment variables, among other things. Needed to extract a style sheet or trying to generate an file for a single-page web application is yet another instance.
Mode
Webpack uses mode to determine which configuration and optimizations are appropriate for the application. This activates some built-in Webpack mode-specific plugins, allowing it to be built for the right atmosphere. Development, production, or none are the options. If you don't specify a mode, Webpack will use production by default.
For debugging, development optimises for quicker build times and code readability. Production strives for the minimum possible build, which necessitates a longer build time to decode and reduce the code.
Last but not the least, you must be conscious of browser support. Webpack is currently set to assist browsers that support ES5 and higher.
How does webpack work?
Even the most basic web projects contain HTML, CSS, and JS. It can also include assets like typefaces, photos, and so forth. Establishing an index.html file with the suitable CSS and JS links, as well as the required assets, is a pretty standard webpack workflow. Additionally, if you have a large number of CSS and JS components that are interdependent, they must be optimised and correctly grouped into a single unit that is ready for launch.
Webpack depends heavily on setup to accomplish all of this. Although webpack 4 happens to come with sensible defaults, you'll need a specific file type ' for any project that isn't trivial. This file explains how the files, as well as assets, must be converted or what output must be produced. This file can speedily be monolithic, making it difficult to recognise how webpack works unless you understand the underlying concepts that underpin it.
Webpack constructs the dependency graph by starting from the entry points and resolving each module it confronts relying on the configuration. If a module includes dependencies, the procedure is iterated for each dependency till the traversal is complete. Webpack then combines all of the project's modules into a limited number of bundles — generally just one — that the browser can load.
Why should you use a webpack?
There are several reasons for using Webpack. Given below are some of the reasons you must use Webpack for your project.
It gives a modem system
Every programming language designed for scale requires a module system. Webpack will give you a lot of support for your ES6-based module system (it supports a large number of module system standards, but ES6 is perhaps the most recent). Furthermore, because of the module system, each file you generate will be a module that has its scope.
As a consequence, if you begin using ever more dependencies, this becomes even more efficient. This module streamlines the process of having to download modules, so it's commonly used in frameworks/libraries. It will not only provide you with the benefits listed above, but you will also gain a better understanding of how front-end boilerplates perform behind the scenes. As a result, comprehending the modern front-end environment will be a breeze for you.
Total command of the construction system
Whenever you need to transpile your ES6+ code in older iterations to make your Javascript code workable with previous browsers, you can use this module and choose various build systems that you'll require, like using Babel or Traceur via Webpack loaders. You have absolute control over it in either case. This is advantageous because you'll be in a place to steer your website in the right direction.
Webpack makes it easier to create single-page applications
The advantages of using this module are clear, especially if you're working on single-page applications. You'll be able to easily create a single application once you've learned everything there is to know about webpack. This is particularly the case when using React because this module can use Babel and other transpilers to convert JSX syntax into comprehensible Javascript code.
When using Webpack, development time can be reduced
This module's "Hot Module Replacement" characteristic has also helped to reduce development time. Since your page does not have to reload completely to represent your changes to the Javascript code, it has been shown to boost efficiency. It will not only pertain to Javascript but introducing CSS loaders to the webpack config would also advantage your CSS code. As a result, your development time will be significantly reduced.
How is Webpack different from Gulp, Browserfiy, Grunt?
Grunt and Gulp are just file-handling tools with no notion of a dependency graph.
Browserify is primarily a tool for converting Node.js require() calls into browser-friendly calls. It's a dependency graph for the source code only. Some static assets can be managed with plugins like Parcelify, but you'll then go out of your way to make it function.
The connection between Babel and Webpack
Babel is a translator that converts your 'fancy' (ES6+) JS code into 'not-so-fancy' (ES5) code that can be understood by the browser (front-end) or Node.js (back-end).
Why do we use terms like browser and Node.js? We can't wait to try out the newest and greatest features, even before they're officially recognized. Babel is sometimes referred to as a transpiler because of this. It's important to note that Babel is popular for both front-end and back-end development.
If Babel becomes a JS translator, Webpack is a gigantic translator that works with a wide range of languages (or assets). Webpack, for instance, frequently uses Babel as one of the jobs. Webpack, for example, can gather all of your inline CSS designs in the Javascript files and wrap them into a single file.
What should you know?
There is a steep learning curve with Webpack. However, provided how much time and energy it can save in the long run, it's a tool worth knowing.
Webpack will not be able to solve all of your problems. It does, however, solve the bundling issue. That's one less thing to be concerned about during the development process.
