Hot code swapping for Elm.
This loader injects HMR support code to the Elm module generated by elm-webpack-loader.
- Elm 0.18 support
- Add event callback see #18
- Better elm-lang/websocket support (thanks to @rundis)
- Don't error when there are no ports (thanks to @glenjamin)
- Elm 0.17 support
- swap port and EmptyAction are gone. Enable this loader and it just works.
- Incoming ports still work after hot swapping
$ npm install --save elm-webpack-loader elm-hot-loaderIn your webpack.config.js file:
With webpack 2+
module.exports = {
module: {
rules: [{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
use: [
'elm-hot-loader',
'elm-webpack-loader',
]
}]
}
};With webpack 1
module.exports = {
module: {
loaders: [{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-hot!elm-webpack'
}]
}
};If you don't use elm-webpack-loader to compile Elm, just make sure webpack uses elm-hot to load your compiled js file. Add this to your webpack config file:
With webpack 2+
rules: [
// ...
{
test: /[YOUR_COMPILED_JS_FILE_NAME_HERE]\.js$/,
loader: 'elm-hot-loader',
}
// ...
]
With webpack 1
loaders: [
// ...
{
test: /[YOUR_COMPILED_JS_FILE_NAME_HERE]\.js$/,
loader: 'elm-hot',
}
// ...
]
You should also add the --hot flag when starting webpack.
This loader relies on elm-webpack-loader to compile Elm to JS.
You can find an example project at elm-hot-loader-starter.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent