Webpack is an open-source JavaScript module bundler. Webpack collects modules with dependencies and generates static assets representing the collected modules. What exactly has to be considered during this process is determined in a configuration file. When a webpack task is executed, one or more files are generated according to these instructions. In this way, various recurring tasks can be automated and thus simplified. No matter if you want to compile Sass to CSS or TypeScript to JavaScript, everything is no problem for Webpack. Of course, these generated files can be further optimized, for example by minimizing them. More about this a little further below.

To make Webpack tasty for you, here is a use case that I find very useful. During the development period a developer can extend Webpack with the plugin "webpack-dev-server". This brings a huge advantage: the "Hot Module Replacement". This feature eliminates the need to reload the website as soon as a freshly compiled CSS or JavaScript file is available. This eliminates the need for the developer to reload the website every time during development and saves a lot of time. One can imagine this process similar to a syringe at the doctor. Only the file is injected and the website is updated at the same time. You can download more plugins for Webpack for free.

Webpack not only collects the modules defined in the configuration and adds the assets, but it also determines their dependencies and optimizes them.

Installation of Webpack

To run Webpack, we need Node.js, the linchpin of server-side JavaScript. This platform can be downloaded as an installer of Node.js. The Node Package Manager (npm), a management software for JavaScript dependencies, is also included in this download and will be installed immediately.

So that npm knows what it has at its disposal, the case still has to be packed. The packing list of this is listed in the package.json file. Here all dependencies (dependencies) including version and their limits are defined. A more detailed documentation of npm is also available.

Now that we have the necessary parts together, the exciting part comes. Open the command line, navigate to the root directory of the project and start with the command "npm install". Now all modules listed in the package.json file will be downloaded. The nice thing about it is that npm detects if there are further dependencies for this module and loads them. If this were so easy when packing suitcases, you would never forget anything again. "I want sun!" and swish, the sunscreen and sun hat are included.

Since all dependencies are downloaded individually, the download may take some time. All downloads are automatically saved in the folder "node_modules".

And don't forget - there are also alternatives to npm, such as Yarn. Evil tongues say yarn is faster. Good news - that is the case. The call to Yarn after the installation is almost the same as that of npm namely "yarn install".

Configuration of Webpack

The configuration is done in the already described webpack.config.js file. This file contains a JavaScript object with the required settings for the initial files, the output directories, and other properties. This configuration file is usually located in the root directory of the project.

In this object we can distinguish between different environments, for example development and production mode. Functions, for example the minimization of code, can be switched on or off for each environment. This makes sense, as the development should take place quickly, without long waiting times.

We have set Webpack so that all optimizations are only carried out after completion of the work on the live website. Thus all files are usable and give the website faster loading times, which in turn significantly increases the user experience.

Closing remarks

Of course, configuring Webpack and integrating such a workflow takes a lot of time. This effort is worthwhile because it can be applied to every single project.

I hope I have been able to give you an overview of this matter. If you have any suggestions or would like more information, please write to us and another blog entry may follow.

Thanks for reading and see you next time.