Easy Elm + Webpack 3 with NWB

Why NWB?

Webpack 3 is pretty nice. However, NWB makes it even nicer. It makes doing React and Preact apps so easy:

nwb init react-app
yarn start

The main advantage over something like create-react-app (also fantastic) is that you can customize the Webpack configuration. There’s no ejection required, you just add what you want to NWB’s configuration.

However, it doesn’t yet have support for Elm. Which would be great, because Elm by default doesn’t minify its outputted JS, or allow external CSS to be used easily. Here’s how to get it working with Webpack:

Setting up NWB + Elm

Install nwb. You can install it globally like so:

yarn global add nwb
# or
npm i -g nwb

Set up NWB in your Elm project — for Elm we want the web-app type:

nwb init web-app

This will create an opinionated file structure, with a fresh package.json will predefined scripts ready to run.

Move your main elm file (e.g. Main.elm) into the src directory. Update your elm-package.json file to mirror this move:

…
"source-directories": [
  "src"
]
…

Install the Elm webpack loader:

yarn add elm-webpack-loader --dev
# or
npm i elm-webpack-loader --save-dev

Update your nwb.config.js file to use the Elm loader:

module.exports = {
  type: 'web-app',
  polyfill: false,
  webpack: {
    extra: {
      module: {
        rules: [{
          test:    /\.elm$/,
          exclude: [/elm-stuff/, /node_modules/],
          loader:  'elm-webpack-loader?verbose=true&warn=true&pathToMake=./node_modules/.bin/elm-make',
        }]
      }
    }
  }
}

We also disable NWB’s default of adding polyfills for Promise, fetch, and Object.assign as Elm doesn’t need them.

Add an src/index.css file with what you wish.

Update the src/index.js to:

require('./index.css');
const Elm = require('./Main.elm');
const app = Elm.Main.embed(document.querySelector('#app'));

You should now be able to get a hot reloaded preview by running from your project’s root:

yarn start
# or
npm start

To get an optimised and fingerprinted (cache friendly) build, simply run:

yarn run build
# or
npm run build

And then deploy the dist directory to whatever static host takes your fancy!