The Core Concepts of Webpack

The core concepts in Webpack

  • Entry
  • Output
  • Loaders
  • Plugins
  • Presets

Entry

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.

Output

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

Loaders

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

Plugins

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