Phoenix + React + Elm config with webpack

description.md

Attemp to make work react with elm on a phoenix project.

The project directory for elm is

web
├── channels
├── controllers
│   └── api
│       └── v1
├── helpers
├── models
├── static
│   ├── css
│   │   ├── components
│   │   ├── globals
│   │   ├── libs
│   │   └── modules
│   ├── elm
│   │   └── elm-stuff
│   ├── js
│   │   ├── actions
│   │   ├── components
│   │   ├── containers
│   │   ├── layouts
│   │   ├── reducers
│   │   └── views
│   └── vendor
│       └── css
├── templates
│   ├── category
│   ├── contact
│   ├── layout
│   ├── ledger
│   ├── organization
│   └── page
└── views

package.json

{
  "name": "bonsai",
  "version": "1.0.0",
  "description": "Finance info",
  "main": "webpack.config.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error\" && exit 1"
  },
  "author": "Boris Barroso",
  "license": "ISC",
  "dependencies": {
    "classnames": "^2.2.3",
    "es6-promise": "^3.1.2",
    "invariant": "^2.2.1",
    "isomorphic-fetch": "^2.2.1",
    "moment": "^2.12.0",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html",
    "react": "^15.0.1",
    "react-addons-css-transition-group": "^0.14.7",
    "react-bootstrap": "^0.29.0",
    "react-datepicker": "^0.25.0",
    "react-dom": "^15.0.1",
    "react-page-click": "^2.1.0",
    "react-redux": "^4.4.1",
    "react-router": "^2.0.1",
    "react-router-redux": "^4.0.0",
    "redux": "^3.3.1",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.0.1"
  },
  "devDependencies": {
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.3.13",
    "babel-preset-stage-2": "^6.3.13",
    "css-loader": "^0.23.1",
    "elm": "^0.17.0",
    "elm-hot-loader": "^0.3.3",
    "elm-webpack-loader": "^3.0.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "node-libs-browser": "^1.0.0",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.0"
  }
}

webpack.config.js

'use strict';

var path              = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack           = require('webpack');
const elmSource       = __dirname + '/web/static/elm';

// helpers for writing path names
// e.g. join("web/static") => "/full/disk/path/to/hello/web/static"
function join(dest) { return path.resolve(__dirname, dest); }

var config = module.exports = {
  // our application's entry points - for this example we'll use a single each for
  // css and js
  entry: {
    app: [
      './web/static/css/app.sass',
      './web/static/js/app.js',
      './web/static/elm/App.elm'
    ],
  },

  // where webpack should output our files
  output: {
    path: join('priv/static'),
    filename: 'js/app.js',
  },

  resolve: {
    extensions: ['', '.js', '.elm', '.sass'],
    modulesDirectories: ['node_modules'],
  },

  // more information on how our modules are structured, and
  //
  // in this case, we'll define our loaders for JavaScript and CSS.
  // we use regexes to tell Webpack what files require special treatment, and
  // what patterns to exclude.
  module: {
    noParse: /vendor\/phoenix/,
    loaders: [
      {
        test: /\.elm$/,
        exclude: /(node_modules|elm-stuff)/,
        loader: `elm-webpack?cwd=${elmSource}`
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          cacheDirectory: true,
          plugins: ['transform-decorators-legacy'],
          presets: ['react', 'es2015', 'stage-2', 'stage-0'],
        },
      },
      {
        test: /\.sass$/,
        loader: ExtractTextPlugin.extract('style', 'css!sass?indentedSyntax&includePaths[]=' + __dirname +  '/node_modules'),
      }
    ],
  },

  // what plugins we'll be using - in this case, just our ExtractTextPlugin.
  // we'll also tell the plugin where the final CSS file should be generated
  // (relative to config.output.path)
  plugins: [
    new ExtractTextPlugin('css/app.css'),
  ],
};

// if running webpack in production mode, minify files with uglifyjs
if (process.env.NODE_ENV === 'production') {
  config.plugins.push(
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({ minimize: true })
  );
}