Create App

Frontend build config generator

Learn webpack

A handbook for webpack beginners

Buy Now

Configuring webpack is painful

The heart of webpack — the webpack.config.js — has a syntax that probably makes sense for hackers on the internals of webpack. But for devs just wanting to create a new project, it's a nightmare to write.

webpack config wtf

You see keywords like module, rules, use, entry, plugins. But what does that all even mean in the context of a build setup for a web app?

You stumble around with webpack, browsing the docs, tutorials, blogs and YouTube to trying to make sense of it all. And you're really struggling.

The problem is that every tutorial has their creative way of configuring webpack.

One tutorial tells you to use the html-webpack-plugin (whatever that is?) and another tutorial doesn't mention that at all.

One tutorial uses babel-preset-env and another uses something else.

There just doesn't seem to be one standard way of implementing anything with webpack. This makes it very difficult to know what is the best practice way to configure it.

Javascript fatigue before hello world

To create a simple hello world app with webpack, you have to install LOTs of dependencies. First, there's webpack, which is fine. You already expected to install that. But then youalso have to install all of the following:

  • webpack-cli
  • webpack-dev-server
  • babel-loader
  • @babel/preset-react
  • @babel/core
  • @babel/preset-env
webpack config wtf

These dependencies are only used for building the app — you haven’t even coded a single feature yet.

You very quickly lose control over whats going on. You desperately start googling “babel”, “babel-preset-env” to learn what it’s doing but you just get overwhelmed with all the information.

And you’re worried that all these dependencies will bloat your bundle. But it’s difficult to know because you don’t know what’s going on under-the-hood in webpack. Maybe webpack is smart and doesn’t put these in the output bundle? You are not sure.

You want to be an awesome frontend dev knowing modern tools - but is it really supposed to be this hard just to get started coding a simple webpack app in 2019?

What if you had one source of truth for learning how to build fast, well-organized and scalable webpack apps?

What if you could use webpack to make fast apps by using the latest and greatest tech — without shipping too much to the end-user. Your apps would get quicker load speed and better overall performance. You would use powerful techniques like minifying and uglifying like a pro.

100 web app speed

Your app would be well-organized. The code would be easier to maintain even for big and complex code bases. And your build setup would be highly customizable and ready for the enterprise. You would never paint yourself into a corner.

You would take full benefit of ES6 in your codebase. It would be a true future-focused app using the latest tech to make you as productive and up-to-date as possible. You could create apps with Vue, React, or whatever you want. The possibilities are endless.

But most importantly you would understand frontend development much deeper. You would grow your skills and become a better dev. You would be a well-rounded developer in a really good position to get the job you want.

Learn webpack is a complete handbook for webpack beginners

Learn webpack is an e-book designed to make the process of learning webpack as quick and smooth as possible for you.

To deeply learn webpack, you’ll start with a clean slate. No more copy-pasting boilerplates and ejecting CRA to try to figure out things backward. You’ll start with an empty editor and you'll write the whole webpack.config.js yourself.

You will learn step-by-step how to build the webpack.config.js, package.json, .babelrc and all other files required to build a modern web app with webpack. This approach makes webpack super easy to learn.

But it’s not enough just to learn the syntax. You’ll learn all about the dependencies like Babel, webpack-dev-server, and React hot loader. You learn what they do and why you need them. This way you can use the dependencies to your advantage, to make your app fast and beautiful for your users.

You’ll also learn how to squeeze out every juice of webpack to make your app as fast as possible by using advanced techniques such as code splitting and tree shaking.

This is a complete and up-to-date book for webpack beginners. It covers the latest stable version of webpack which is version 4.

What does the book cover?

This book is a handbook for creating enterprise-ready production apps with webpack. These are the main topics covered:

  • Why do you need webpack?
  • Getting started tutorial
  • What happens under-the-hood? A deep dive into loaders, plugins, manifests, etc.
  • An introduction to NPM and package.json
  • How to configure separate prod and test configs
  • More than one output for SSR and public/admin sites
  • Create an awesome dev experience
  • Optimized production builds to get a small bundle size
  • Code splitting to make faster apps
  • Caching for quicker load speeds
  • What is tree shaking and how to use it to create fast apps
  • How to enable source maps for better debugging experience
  • A bunch of recipes for React, Vue, Typescript, etc
Read the full table of contents here

The book is made up of three parts:

Part 1: The Getting started tutorial You'll jump straight into coding your first React app with webpack. You start from scratch and you will finish up with a complete webpack project that you can put in production. This tutorial is designed to get you up and running quickly.

Part 2: Production-ready apps with webpack You’ll learn how to configure an awesome developer experience that makes you super productive and use tools and techniques to get the lowest possible bundle size for the production build. You’ll also learn about the internals of webpack. Loaders, plugins, manifests and chunks will no longer feel like magic

Part 3: Recipes Even the webpack pros have to look up how to configure specific things like Vue, React, Typescript, etc. In this part of the book, you will have recipes that you can use to create the app you want to create - so you don't have read long and outdated medium-articles to get the code you need.

Zero fluff guaranteed

This is a short book - only 100 pages. It's to the point. And it has absolutely zero fluff - just actionable advice.

Buy Learn webpack

As a developer, the best investment you can make is to invest in your skills. When you know webpack you will be a more complete frontend dev. It will set you up for getting promotions.

And if you're looking for a job, talking fluently in interviews about how to use code splitting and tree shaking with webpack will make you stand out from other frontend devs.

Book details

Length:100 pages
Format:PDF and EPUB
Webpack version:4

Buy Now for $24

It's time for you to take back control of your webpack config!

Still not convinced?

It can also be good to know that I offer a 30-day money-back guarantee if you are not happy with the book.

About the author

Jakob LindHi, I'm Jakob Lind (@karljakoblind). I'm a full stack developer and independent consultant. I have 10 years of experience as a professional dev and I have been coding as a hobby since I was a kid.

I’m a strong believer in sharing and helping others. I have a blog and I work on open source projects.

The best way to learn how to program is to do hard and deep work. There are no shortcuts.


Q: What if I don't like the book?

A: I offer a 30-day no-questions-asked money-back guarantee

Q: What version of webpack do the book use?

A: It's written for the latest version of webpack: webpack 4.

Q: But soon there will be a new version of webpack and this book will be outdated?

A: Included in the price is a lifetime of updates! Whenever I update the book because there is a new version of webpack or if I extend the book with new material, you will get the update straight in your inbox with no additional cost.

Q: What formats do I get?

A: You'll get PDF and EPUB. If I sometime in the future offer more formats, you will get them also of course.

Q: How many pages is it?

A: 100 pages. It's short and sweet so that you'll actually read it.