Creating Tiny Bootstrap Builds With Webpack
Tags: webpack, bootstrap, building, bundling
Published: 2017-02-25 12:47:57

---
title: Creating Tiny Bootstrap Builds With Webpack
published: true
description: Creating small Bootstrap builds with Webpack.
cover_image: 
tags: webpack, bootstrap, building, bundling
---

_TL;DR Here is a [repository](https://github.com/kay-is/webpack-bootstrap-example) with a working example. :)_

Almost everyone developing for the Web has read of [Bootstrap](http://getbootstrap.com/), the CSS framework from Twitter. It's easy to theme and well know in the whole industry, so if you have no strong opinion about CSS, it's probably a good start.

## Why?

Problem is, it's freaking huge. A normal Bootstrap build, delivered from a content delivery network (CDN) is ~120KB big. Often clients have already cached this, because many pages use the same CDN links, but sometimes you don't want or can rely on external resources.

_The smaller the better_, because _the fastest bit is the bit not sent_ and a _penny saved is a dollar earned!_

The the idea here is, to make a custom build of Bootstrap, but not with the [Web-interface](http://getbootstrap.com/customize/), but with the Less source of Bootstrap and Webpack.

## How?

First you get Bootstrap via `npm`.

Next, you need some loaders and a plugin for Webpack. The `style-loader`, `css-loader`, `sass-loader` and the `extract-text-plugin`.

The rule for your `less` files in the `webpack.config.js` looks like this:

      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: [
            {loader: 'css-loader', options: {minimize: true}},
            'less-loader',
          ],
        })
      }
      ...
      plugins: [new ExtractTextPlugin('style.css')]

This will tell Webpack how to load your Less files, compile them to CSS and then extract this CSS from the JS bundles into a CSS file.

Also, since Webpack now understands Less, you can use a less file directly as entry. 

    entry: {style: './src/index.less'}

The Bootstrap sources consist of a few Less files, all _imported_ by the `bootstrap.less`, which normally serves as the entry point to compile the whole thing.

But we do not want the _whole thing_ because it's huge!

So what we do is copying the content of the `bootstrap.less` file into our own less file and then comment out what we don't need.

Take this example:

    @import "node_modules/bootstrap/less/variables.less";
    @import "node_modules/bootstrap/less/mixins.less";
    @import "node_modules/bootstrap/less/normalize.less";
    @import "node_modules/bootstrap/less/scaffolding.less";
    @import "node_modules/bootstrap/less/type.less";
    @import "node_modules/bootstrap/less/grid.less";
    @import "node_modules/bootstrap/less/forms.less";
    @import "node_modules/bootstrap/less/buttons.less";

If you don't use glyphicons, tables, print-views, code, or components, you can __get this whole bundle down to 33KB__ (pre gzip). Maybe you just need the basic CSS and would like to do your own components, or you want to do a simple formular without much extras.

You can also use a [post-css](https://github.com/postcss/postcss-loader) loader to add vendor prefixes.