#### This Page

# Webpack

Websites are exploding in complexity and even static websites are no exception to this. In particular systems like bootstrap and friends no longer just come in CSS files but they come with their own build setup to ship JavaScript files, they use Less or Sass to build the stylesheets and much more.

Right now there is a fight between different systems to figure out which way the journey will go, but one of the best solutions has turned out to be webpack.

Webpack is not natively supported by Lektor but there is an official Webpack Support Plugin which can be used to make Lektor and Webpack friends.

## Enabling the Plugin

First you need to enable the plugin. The following command will do that for you:

    $ lektor plugins add webpack-support

## Webpack Setup

Now you need to configure webpack. The plugin expects a webpack project in the `webpack/` folder. Within you will need a `package.json` as well as a `webpack.config.js`

### `package.json`

This file instructs `npm` which packages we will need.

npm-init is a command-line tool to interactively create a `package.json` file.

    $ npm init

This will ask you a bunch of questions (invoke with `--yes` to use default values) and then generate a `package.json` file for you.

It should look similar to the following example. Please do not just copy-paste this! Instead run the tool, so that your `package.json` meets the latest format specification.

    {
      "name": "lektor-example",
      "version": "0.1.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "MIT"
    }

Now we can `npm install` all the things we want:

    $ npm install --save-dev webpack babel-core node-sass babel-loader sass-loader css-loader url-loader style-loader file-loader extract-text-webpack-plugin

This will install webpack itself together with babel and sass as well as a bunch of loaders we need for getting all that configured. Because we created a `package.json` before and we used `--save-dev` the dependencies will be remembered in the `package.json` file.

### `webpack.config.js`

Next up is the webpack config file. Here we will go with a very basic setup that's good enough to cover most things you will encounter. The idea is to build the files from `webpack/scss` and `webpack/js` into `assets/static/gen` so that we can use it even if we do not have webpack installed for as long as someone else ran it before.

In this example we will configure the following things:

- all `.scss` files will be processed with Sass
- all `.js` files will be processed with Babel to convert ES6 into ES5
- JS and CSS files will be minified
- all built files will go to `assets/static/gen`
- there will be a `gen/app.js` and a `gen/styles.css` file to include

    var webpack = require('webpack');
    var path = require('path');
    var ExtractTextPlugin = require('extract-text-webpack-plugin');

    module.exports = {
      entry: {
        'app': './js/main.js',
        'styles': './scss/main.scss'
      },
      output: {
        path: path.dirname(__dirname) + '/assets/static/gen',
        filename: '[name].js'
      },
      devtool: '#cheap-module-source-map',
      resolve: {
        modules: ['node_modules'],
        extensions: ['.js']
      },
      module: {
        rules: [
          { test: /\.js$/, exclude: /node_modules/,
            loader: 'babel-loader' },
          { test: /\.scss$/,
            loader: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: 'css-loader!sass-loader' } ) },
          { test: /\.css$/,
            loader: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: 'css-loader' } ) },
          { test: /\.(woff2?|ttf|eot|svg|png|jpe?g|gif)$/,
            loader: 'file' }
        ]
      },
      plugins: [
        new ExtractTextPlugin({
          filename: 'styles.css',
          allChunks: true
        }),
        new webpack.optimize.UglifyJsPlugin()
      ]
    };

## Creating the App

Now we can start building our app. We configured at least two files in webpack: `js/main.js` and `scss/main.scss`. Those are the entry points we need to have. You can create them as empty files in `webpack/js/main.js` and `webpack/scss/main.scss`.

## Running the Server

Now you're ready to go. When you run `lektor server` webpack will not run, instead you need to now run it with the `webpack` flag which will enable the webpack build:

    $ lektor server -f webpack

Webpack automatically builds your files into `assets/static/gen` and this is where Lektor will then pick up the files. This is done so that you can ship the webpack generated assets to others that do not have webpack installed which simplifies using a Lektor website that uses webpack.

## Manual Builds

To manually trigger a build that also invokes webpack you can also pass the `webpack` flag there:

    $ lektor build -f webpack

## Including The Files

Now you need to include the files in your template. This will do it:

    <link rel="stylesheet" href="{{
      '/static/gen/styles.css'|asseturl }}">
    <script type=text/javascript src="{{
      '/static/gen/app.js'|asseturl }}" charset="utf-8"></script>

## Comments