[Feature] Require assets (e.g. images) with webpack #363
Description
TLDR
The project could use a webpack plugin to load assets instead of - or as an alternative to - passing them from JavaScript via flags
Explanation
@jhnns helped me create a webpack plugin to "require" an asset path in an Elm project and leverage webpack loaders. We came up with this proof of concept. It uses an ejected create-elm-app and adds the webpack loader.
The loader itself is available as elm-asset-webpack-loader.
Usage
img [ src "require:src/assets/logo.svg" ] []Result
Syntax
The require: syntax can be discussed. I liked it, but I'm open to other ideas.
It could also be configured, but with create-elm-app most people will likely stick to the default.
Implementation
The loader is searching for strings in Elm files already compiled to JavaScript. It replaces the pattern and relies on string replacement. But it'll be more robust than to rely on Elm internals and to support different compiler modes (debug, optimize) and versions (0.18, 0.19, 0.19.1).
Alternatives and prior art
elm-assets-loaderis a comparable approach, and is more sophisticated. The package is marked as deprecated.babel-elm-assets-pluginis using babel. It mentions to disable Elm optimization. This could be because it's using aStringtype alias.
I'm happy to discuss changes to elm-asset-webpack-loader or go with an alternative solution or integrate it directly into create-elm-app to achieve the goal to use webpack loaders and to likely fail at compile time.