Elm with Webpack in 2 minutes

by Gregor Uhlenheuer on July 22, 2018

Although the official Elm documentation does a great job at explaining how to build a new Elm appliation from the ground-up, it does miss out on the part on how you would integrate Elm into a proper project setup using Webpack for example.

In my early Elm days I searched through numerous example projects and popular Elm repositories on Github and picked up all the bits in small pieces. In this post I want to summarize the few steps on how to get started with an “Elm + Webpack” setup you can built upon.

Elm project

At first we create a new Elm project using yarn or npm:


Now you can add some helper scripts into your newly created package.json:


Next we are going to create a very basic webpack.config.js that processes Elm files using the elm-webpack-loader and the remaining files using a basic file-loader:


Now we take a basic HTML index page stub, the Elm application will be injected into:

The corresponding javascript entry point can start with something like the following:

Elm application code

Now that we have a basic setup prepared we can write the first lines of Elm to start with:

The lines above will look pretty familiar to everyone that has written or seen some Elm before - you can see the main components that drive basically every Elm application: a “model”, “view” and an “update” function.


That’s all we needed so far - let’s run it:


This post is tagged with programming, elm, webpack, javascript and web