---
title: "4 Key Concepts of Webpack | Netlify"
description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!"
source: "https://www.netlify.com/blog/2017/01/03/4-key-concepts-of-webpack/"
last_updated: "2026-07-14T22:03:54.000Z"
---
[Webpack](https://webpack.github.io/) is JavaScript module bundler that has taken the world by storm, but a lack of great docs and wealth of boilerplates have led to many people using it, but not understand it.

Sean T. Larkin from the Webpack core team spoke at a recent [JAMstack SF meetup](https://www.meetup.com/jamstack-sf/events/235162031/) on the subject.

Webpack is a static build tool and there are 4 key concepts to understand how it works.

## Entry

Webpack creates a graph of all of your application’s dependencies. The starting point of this graph is known as an entry point. The entry point tells Webpack where to start and follows the graph of dependencies to know what to bundle. You can think of your application’s entry point as the contextual root or the first file to kick off your app.

In Webpack we define entry points using the entry property in our Webpack configuration object.

The simplest example is seen below:

webpack.config.js

```
module.exports = { entry: './path/to/my/entry/file.js'};
```

## Output

Once you’ve bundled all of your assets together, we still need to tell Webpack where to bundle our application. The webpack `output` property describes to Webpack how to treat bundled code.

webpack.config.js

```
module.exports ={  entry:'./path/to/my/entry/file.js',  output:{    path: path.resolve(__dirname,'dist'),    filename:'my-first-webpack.bundle.js'}};
```

## Loaders

The goal is to have all of the assets in your project to be Webpack’s concern and not the browser’s. (This doesn’t mean that they all have to be bundled together). Webpack treats [every file (.css, .html, .scss, .jpg, etc.) as a module](https://webpack.js.org/concepts/modules). However, Webpack only understands JavaScript.

Loaders in webpack\_transform these files into modules\_as they are added to your dependency graph.

webpack.config.js

```
const config ={  entry:'./path/to/my/entry/file.js',  output:{    path: path.resolve(__dirname,'dist'),    filename:'my-first-webpack.bundle.js'},  module:{    rules:[{test:/\.(js|jsx)$/, use:'babel-loader'}]}};
```

## Plugins

Since Loaders only execute transforms on a per-file basis, `plugins` are most commonly used (but not limited to) performing actions and custom functionality on “compilations” or “chunks” of your bundled modules [(and so much more)](https://webpack.js.org/concepts/plugins). The Webpack Plugin system is [extremely powerful and customizable](https://webpack.js.org/api/plugins).

In order to use a plugin, you just need to `require()` it and add it to the `plugins` array. Most plugins are customizable via options. Since you can use a plugin multiple times in a config for different purposes, you need to create an instance of it by calling it with `new`.

webpack.config.js

```
const HtmlWebpackPlugin =require('html-webpack-plugin');//installed via npmconst webpack =require('webpack');//to access built-in pluginsconst config ={  entry:'./path/to/my/entry/file.js',  output:{    filename:'my-first-webpack.bundle.js',    path:'./dist'},  module:{    rules:[{test:/\.(js|jsx)$/, use:'babel-loader'}]},  plugins:[newwebpack.optimize.UglifyJsPlugin(),newHtmlWebpackPlugin({template:'./src/index.html'})]};
module.exports = config;
```

Thanks to Sean and the Webpack team for their hard work on the build tool and the recent v2 [documentation](https://webpack.js.org/concepts/) updates.

### Share

-   [X (fka Twitter)](https://twitter.com/intent/tweet?text=4 Key Concepts of Webpack&url=https://www.netlify.com/blog/2017/01/03/4-key-concepts-of-webpack//)
-   [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2017%2F01%2F03%2F4-key-concepts-of-webpack%2F%2F)
-   [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2017/01/03/4-key-concepts-of-webpack//)
-   [Bluesky](https://bsky.app/intent/compose?text=4 Key Concepts of Webpack+https://www.netlify.com/blog/2017/01/03/4-key-concepts-of-webpack//)

* * *

### Tags

-   [Webpack](/blog/tags/Webpack/)

## Keep reading

![](/_astro/bbe3cfe0b5d5228f5d0a66e26ce057de315c7712-1200x675_ZQfk21.webp)

Tools & Services December 3, 2025

[

### Vibe coding to production with Kiro powers

](/blog/vibe-coding-production-kiro-powers)

-   ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp)
    
    Gehrig Kunz
    

![](/_astro/b596a7453ede5fe6739bd12506636fe522828198-2400x1351_1ANtEG.webp)

Tools & Services February 21, 2025

[

### Secure local development with Codezero for Netlify

](/blog/secure-local-development-codezero)

-   Kathleen Randall
    

## Recent posts

News & Announcements July 14, 2026

[

### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers

](/blog/new-pro-plan-tiers)

-   ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp)
    
    Gehrig Kunz
    

News & Announcements July 13, 2026

[

### Netlify inside of Claude Design

](/blog/netlify-inside-of-claude-design)

-   ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp)
    
    Sean Roberts
    

News & Announcements June 25, 2026

[

### Netlify Functions, designed for Agent Experience

](/blog/netlify-functions-designed-for-agent-experience)

-   ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp)
    
    Eduardo Bouças
    

![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp)

### How do the best dev and marketing teams work together?

[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)