Asad I. answered • 12/31/19
Experienced Javascript, php, html and React Native Tutor.
Webpack is a module bundler. Webpack can take care of bundling alongside a separate task runner.
When you bundle a project using webpack, it traverses the imports, constructing a dependency graph of the project and then generates output based on the configuration. Additionally, it's possible to define split points to create separate bundles within the project code itself.
Webpack supports ES2015, CommonJS, and AMD module formats out of the box. The loader mechanism works for CSS as well, with @import and url() support through css-loader. You can also find plugins for specific tasks, such as minification.
Dependancy Graph: A dependency graph is a directed graph that describes how nodes relate to each other. In this case, the graph definition is defined through references (require, import) between files. Webpack statically traverses these without executing the source to generate the graph it needs to create bundles.
