What is Webpack

Ref: https://webpack.js.org/

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.


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.


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.


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 perform a wider range of tasks like bundle optimization, asset management, and injection of environment variables.


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.

Browser compatibility




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store



A front-end developer who likes designing stuffs. Technical blog rookie. Loving sharing.