This page covers Elm 0.18

Webpack

Elm reactor is great for prototyping simple applications, but for a bigger app it falls short. As it is now, reactor doesn't support talking with external JavaScript or importing external CSS. To overcome these issues we will use Webpack to compile our Elm code instead of Elm reactor.

Webpack is a code bundler. It looks at your dependency tree and only bundles the code that is imported. Webpack can also import CSS and other assets inside a bundle. Read more about Webpack here.

There are many alternatives that you can use to achieve the same as Webpack, for example:

• Browserify
• Gulp
• StealJS
• JSPM
• Or if using a framework like Rails or Phoenix you can bundle the Elm code and CSS using them.

Requirements

You will need Node JS version 4 or more for these libraries to work as expected.

Installing webpack and loaders

Install webpack and associated packages:

npm i webpack@1 webpack-dev-middleware@1 webpack-dev-server@1 elm-webpack-loader@4 file-loader@0 style-loader@0 css-loader@0 url-loader@0 -S

This tutorial is using webpack version 1.13 and elm-webpack-loader version 4.1.

Loaders are extensions that allow webpack to load different formats. E.g. css-loader allows webpack to load .css files.

We also want to use a couple of extra libraries:

• Basscss for CSS, ace-css is the Npm package that bundles common Basscss styles
• FontAwesome for icons

npm i ace-css@1 font-awesome@4 -S

Webpack config

We need to add a webpack.config.js at the root:

var path = require("path");

module.exports = {
  entry: {
    app: [
      './src/index.js'
    ]
  },

  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: '[name].js',
  },

  module: {
    loaders: [
      {
        test: /\.(css|scss)$/,
        loaders: [
          'style-loader',
          'css-loader',
        ]
      },
      {
        test:    /\.html$/,
        exclude: /node_modules/,
        loader:  'file?name=[name].[ext]',
      },
      {
        test:    /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        loader:  'elm-webpack?verbose=true&warn=true',
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff',
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      },
    ],

    noParse: /\.elm$/,
  },

  devServer: {
    inline: true,
    stats: { colors: true },
  },

};

Things to note:

• This config creates a Webpack dev server, see the key devServer. We will be using this server for development instead of Elm reactor.
• Entry point for our application will be ./src/index.js, see the entry key.