What do I pack in my Webpack?
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
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
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.
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.