The Core Concepts of Webpack

The core concepts in Webpack

  • Entry
  • Output
  • Loaders
  • Plugins
  • Presets


The Entry Point instructs the Webpack compiler where should start from to build out its internal dependency graph.

./src/index.js is the default entry value.


./dist/main.js is the default output value.


Loaders provide an easy way to intercept our dependencies and preprocess them before they get bundled.


Eventually, the dist folder consists of two files now

  • index.html ( Generated by htmlWebpackPlugin and automatically injects <script> tag by linking the output file bundle.js)
  • bundle.js

Epicure tendency!

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