WHAT IS WEBPACK?
DO YOU NEED IT?
WHAT IS DEPENDENCY GRAPH?
Webpack creates a dependency graph for you. This is a mathematical principle in which the dependencies of objects of different origins are connected.
Now, however, you can use CommonJS or ES6 modules to create the above-mentioned dependency graph. Small files are used that define their own needs. The browser that does not support the require () command will use the file after packing by Webpack and will be able to work with it.
There are of course tools like Browserify that solve this problem. How will Webpack be better?
WHAT IS WEBPACK DOING?
WHY IS WEBPACK BETTER THAN GRUNT, GULP OR BROWSERIFY?
Grunt and Gulp are tools for working with files and do not have the ability to create a real dependency graph. Browserify, in turn, is a tool for converting require() to call commands running in the browser. It creates dependency graph only for the source code. Webpack combines these features.
WHAT ARE THE ADVANTAGES OF WEBPACK?
1. Removes unnecessary permanent resources. A huge advantage for CSS users. You use images and CSS in the dist/ folder, which you badly need.
2. Easier code sharing. Webpack will create a specific .css file for you that will reduce the .js file size.
4. Stable work. You will not be able to accidentally enter the code without the image.
5. Webpack will certainly slow you down at first, but when used correctly, it will speed up your work up in the future.
WHAT ARE THE WEBPACK DISADVANTAGES?
It does not make sense to hide that this solution has its drawbacks.
1. The documentation is written in a complicated language.
2. The source code is difficult to master, especially for beginners.
3. Webpack configuration is difficult for non-advanced users. So it’s better to look at ready examples.
4. Difficult syntax in the code that occurs throughout the documentation, and does not have many explanations.
WHAT IS DEV SERVER?
Dev server is a built-in application for local coding. It allows you to view changes in the code in real time, for free. In the case of large projects, such help is invaluable.
Traditional frontend programming relies only on global variables. CSS rules exist in the global namespace. Their use consists in manually setting the selectors. It is very difficult to not make any mistakes in a case of globally defined rules or images. Dependency graph comes with help in the form of Webpack. Automating this process for a large project can be a huge time saving, even if it requires prior configuration.