Babel Elm Assets Plugin

This Babel plugin allows you to search for a particular function call in Elm, and replace it with a require() JS call. This allows you to use webpack generated assets directly in your Elm code.

Usage

TODO

Configuration

TODO

How it works

First you create a function that you use to require your assets. Say we have MyProject/Asset.elm:

module MyProject.Asset exposing (AssetUrl, url)

url : String -> AssetUrl
url path =
    -- this placeholder value is replaced by Webpack at build time
    "webpack-placeholder-url"

type alias AssetUrl =
    String

You'd then call this in your Elm file:

module Main exposing (myImage)

myImage =

Normally when you compile this with Elm, the generated JS will look like:

var author$project$MyProject$Asset$url = function(url) {
  return "webpack-placeholder-url";
};
var author$project$Main$myImageUrl = author$project$MyProject$Asset$url(
  "./file.png"
);

With this loader, Babel can transform that JS to use a require call:

var author$project$MyProject$Asset$url = function(url) {
  return "webpack-placeholder-url";
};
var author$project$Main$myImageUrl = require("./file.png");

Which webpack will know how to handle, meaning your final JS will do something similar to:

var author$project$MyProject$Asset$url = function(url) {
  return "webpack-placeholder-url";
};
var author$project$Main$myImageUrl = "/assets/file-0fabe3.png";

The babel-elm-assets-plugin is maintained by the Front End Capability Team at Culture Amp.