Repository files navigation

Webpack loader for theElm programming language.

It is aware of Elm dependencies and tracks them. This means that in watchmode, if yourequire an Elm module from a Webpack entry point, not only willthat.elm file be watched for changes, but any other Elm modules it imports willbe watched for changes as well.

$ npm install --save elm-webpack-loader

Documentation:rules

webpack.config.js:

module.exports={module:{rules:[{test:/\.elm$/,exclude:[/elm-stuff/,/node_modules/],use:{loader:'elm-webpack-loader',options:{}}}]}};

See theexamples section below for the complete webpack configuration.

You can addcwd=elmSource to the loader:

varelmSource=__dirname+'/elm/path/in/project'...use:{loader:'elm-webpack-loader',options:{cwd:elmSource}}...

cwd should be set to the same directory as yourelm.json file. You can use this to specify a custom location within your project for your elm files. Note, thiswill cause the compiler to look forall elm source files in the specified directory. Thisapproach is recommended as it allows the compile to watch elm.json as well as every filein the source directories.

Set this to true to compile bundle in optimized mode. Seehttps://elm-lang.org/0.19.0/optimize for more information.

  ...use:{loader:'elm-webpack-loader',options:{optimize:true}}...

Set this to true to enable Elm's time traveling debugger.

  ...use:{loader:'elm-webpack-loader',options:{debug:true}}...

This allows you to control aspects of howelm make runs withGHC Runtime Options.

The 0.19 version ofelm make supports a limited set of those options, the most useful of which isfor profiling a build. To profile a build use the settingsruntimeOptions: '-s', which will printout information on how much time is spent in mutations, in the garbage collector, etc.

Note: Using the flags below requires building a newelm make binary with-rtsopts enabled!

If you notice your build spending a lot of time in the garbage collector, you can likely optimize itwith some additional flags to give it more memory,e.g. -A128M -H128M -n8m.

  ...use:{loader:'elm-webpack-loader',options:{runtimeOptions:['-A128M','-H128M','-n8m']}}...

elm make allows you to specify multiple modules to be combined into a single bundle

elm make Main.elm Path/To/OtherModule.elm --output=combined.js

Thefiles option allows you to do the same within webpack

module:{loaders:[{test:/\.elm$/,exclude:[/elm-stuff/,/node_modules/],loader:'elm-webpack-loader',options:{files:[path.resolve(__dirname,"path/to/Main.elm"),path.resolve(__dirname,"Path/To/OtherModule.elm")]}}]}

(Note: It's only possible to pass array options when using the object style of loader configuration.)

You're then able to use this with

importElmfrom"./elm/Main";Elm.Main.init({node:document.getElementById("main")});Elm.Path.To.OtherModule.init({node:document.getElementById("other")});

Hot module reloading is supported by installingelm-hot-webpack-loaderand adding it to your list of loaders. It should look something like this:

module:{rules:[{test:/\.elm$/,exclude:[/elm-stuff/,/node_modules/],use:[{loader:'elm-hot-webpack-loader'},{loader:'elm-webpack-loader'}]}]}

IMPORTANT:elm-hot-webpack-loader must be placed in the list immediatelybeforeelm-webpack-loader.

All options are sent down as anoptions object to node-elm-compiler. For example, you canexplicitly pick the localelm binary by setting the optionpathToElm:

  ...use:{loader:'elm-webpack-loader',options:{pathToElm:'node_modules/.bin/elm'}}...

For a list all possible options,consult the source.

You can find an example in theexample folder.To run:

npm installnpm run build

You can have webpack watch for changes with:npm run watch

You can run the webpack dev server with:npm run dev

For a full featured example project that uses elm-webpack-loader seepmdesgn/elm-webpack-starter .

Webpack can complain about precompiled files (files compiled byelm make).You can silence this warning withnoParse. You can see it in usein the example.

  module:{rules:[...],noParse:[/.elm$/]}

• Fix watching when using the dev server. Usecompiler.watching instead ofcompiler.options.watch as the latter doesn't work with the dev server.

• Logs build output directly to stdout to retain formatting.
• Remove stack trace for errors, as they're never relevant.
• optimize anddebug flags are now set by default depending on the webpack mode.
• Removed several options which provide little benefit.
• Reduced number of dependencies.

• Elm is now a peer dependency.
• Documentation fixes.

• Support for Elm 0.19, drops support for Elm 0.18.

• Fix a bug where maxInstances might end up being higher than expected

• Set maxInstances to 1
• Patch watching behaviour
• AddforceWatch to force watch mode

Make live reloading work more reliably

AddedmaxInstances for limiting of instances

Watching is now done based on elm-package.json, faster startup time via @eeue56

Add support for--debug vianode-elm-compiler

Allow version bumps of node-elm-compiler.

Upgrade to latest node-elm-compiler, which fixes some dependency tracking issues.

Fix potential race condition between dependency checking and compilation.

Use node-elm-compiler 4.0.1+ for important bugfix.

Use node-elm-compiler 4.0.0+

Pass a real error object to webpack on failures.

Support Elm 0.17, and remove obsoleteappendExport option.

Changewarn to be a pass-through compiler flag rather than a way to specifylogging behavior.

Initial stable release.