Phoenix Framework Webpack Integration (replacing Brunch)

.babelrc

{
  "presets": ["es2015", "react", "babel-preset-stage-0"]
}

digest.ex

# lib/mix/tasks/digest.ex

defmodule Mix.Tasks.WebpackIntegration.Digest do
  use Mix.Task

  def run(args) do
    Mix.Shell.IO.cmd "./node_modules/webpack/bin/webpack.js -p"
    :ok = Mix.Tasks.Phoenix.Digest.run(args)
  end
end

mix.exs

# added phoenix.digest alias
defp aliases do
  [
    "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
    "ecto.reset": ["ecto.drop", "ecto.setup"],
    "phoenix.digest": "webpack_integration.digest"
  ]
end

package.json

{
  "repository": {},
  "dependencies": {},
  "devDependencies": {
    "autoprefixer-loader": "^3.1.0",
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "copy-webpack-plugin": "^0.3.3",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^0.9.1",
    "file-loader": "^0.8.5",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.9"
  },
  "scripts": {
    "compile": "webpack -p"
  }
}

webpack.config.js

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebPackPlugin = require("copy-webpack-plugin");

var env = process.env.MIX_ENV || 'dev'
var prod = env === 'prod'

var plugins = [
  new ExtractTextPlugin("css/app.css"),
  new CopyWebPackPlugin([
    { from: "./web/static/assets" },
    { from: "./deps/phoenix_html/web/static/js/phoenix_html.js",
      to: "js/phoenix_html.js"
    },
    { from: "./deps/phoenix/web/static/js/phoenix.js",
      to: "js/phoenix.js"
    }
  ])
];

if (prod) {
  plugins.push(new webpack.optimize.UglifyJsPlugin())
}

module.exports = {
  devtool: "source-map",
  entry: {
    "app": ["./web/static/js/app.js", "./web/static/css/app.scss"]
  },
  output: {
    path: "./priv/static",
    filename: "js/app.js"
  },
  resolve: {
    modulesDirectories: [__dirname + "/web/static/js"],
    alias: {
      phoenix_html: __dirname + "/deps/phoenix_html/web/static/js/phoenix_html.js",
      phoenix: __dirname + "/deps/phoenix/web/static/js/phoenix.js"
    }
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["es2015"]
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style", "css")
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          "style",
          "css!sass?includePaths[]=" + __dirname + "/node_modules!autoprefixer?browsers=last 2 versions"
        )
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        loader: 'url?limit=10000'
      },
      {
        test: /\.woff$/,
        loader: 'url?limit=100000'
      }
    ]
  },
  plugins: plugins
}

Interesting articles which helped me getting started:

• http://matthewlehner.net/using-webpack-with-phoenix-and-elixir/
• http://mikker.github.io/2015/07/16/react-hot-loader-and-phoenix.html
• http://manukall.de/2015/05/01/automatically-building-your-phoenix-assets-with-webpack/