What is Webpack?
What does it do?
The entry point determines where the process of creating an “internal dependency graph” will begin. This will be established in the Webpack config.js file but if none are designated, the default will be ‘./src/index.js’. Another thing that Webpack does for us is to figure out what dependencies and other modules are needed by each file in order for the app to run successfully. It will figure this out for us during compilation.
Webpack creates bundles of files and then will output them into whatever output file is designated in the config file. The default is to output files to the ‘./dist folder’ with the main file having its own ‘./dist/main.js’. You must set the path and filename properties in the output object. The Path Node.js module should be imported at the top of the config file.
Plugins can be used to execute tasks outside of the loaders scope such as “bundle optimization, asset management and injection of environment variables.” There are built in plugins that some with Webpack out of the box but a developer may also customize plugins but requiring them in the file and adding them to the plugins array. Plugins can be used multiple times for different purposes, so in that case the new keyword should be used in the file such as the example below.
The mode parameter can be set to ‘development’, ‘production’ or ‘none’ which will allow certain built-in customizations to run for each different environment. Production is the default mode, however there are more details about exact specifications for each mode in the docs.
Webpack includes browser support for all ES5 browsers.
What are the benefits and are there alternatives to using Webpack?
One benefit to using Webpack or a compiler in general is that it abstracts the complexity with consolidating and unifying necessary files to make the application run more efficiently in the browser. There are many options for bundlers and compilers and each will have slightly varied strengths and characteristics. The Webpack docs has a detailed comparison of six different bundlers, compared by feature.
In conclusion, Webpack is a very useful tool which runs on Node.js and creates a better experience for both the developer and ultimately the user experience of an application. With the advent of Node.js and the boom in use of node modules, Webpack is one solution for the problem of wrangling dependencies and supporting basic assets such as images, fonts and stylesheets, which otherwise might need to be specifically and individually managed. Webpack abstracts some of that process away from the developer and ultimately supports creating cleaner, easier to manage applications.