Webpack is a static module bundler. More specifically, Webpack establishes a dependency graph that consists of modules your web app needed for functioning as expected. Then, it uses this graph and configuration to generate bundles. It is made primarily for bundling JavaScript, but it can transform static assets such as HTML, CSS, and images with corresponding loaders.
The Structure of Webpack
Webpack’s flexibility is mainly due to its configuration file, which describes how to transform assets of the graphs and what output it should produce. The default config file named webpack.config.js, in which you can set up personalized configuration with entry, output, loaders, plugins, and mode.
Entry
An entry point is the beginning of Webpack’s traversal trip for building the dependency graph. Webpack can automatically find out other modules that the entry file relies on.
Output
The output property indicates where to place the bundles it creates and how to name them. The default name for the main output file is ./dist/main.js and the path is ./dist folder.
Loaders
Since the browser can only process JavaScript, CSS, and HTML files, the Webpack has to provide a way for other types of files (eg. md, txt, and so on) to be used in the browser environment. This is where loader comes into play. Loaders process and convert these particular files into valid modules that can be consumed by the environment.
Plugins
Plugins perform a wider range of tasks like bundle optimization, asset management, and injection of environment variables.
Mode
Webpack can enable build-in optimation corresponding to different models. The default model value is “production”, you can set it to either “development” or “none” also.