Configure phoenix framework to use webpack as assets manager

HowToAddWebpackToPhoenix.md

1. For new projects run mix phoenix.new with --no-brunch option and for existing projects remove brunch related things.

2. create package.json file:

echo '{"private": true}' > package.json

3. install webpack and loaders you want to use:

npm install --save-dev webpack babel-loader babel-core livescrip-loader

4. Create a webpack config file, I prefere it to be in config/ dir (e.i config/webpack.js)

module.exports = {
  devtool: "source-map",
  entry: "./web/client/app.ls",
  output: {
    path: "./priv/static/js",
    filename: "app.js"
  },
  resolve: {
    // if not using livescript remove ".ls"
    // for using coffeescript add ".coffee"
    extensions: ["", ".js", ".jsx", ".ls"]
  },
  module: {
    loaders: [
      // uncomment to use coffeescript
      // { test: /\.coffee$/, loader: 'coffeescript' }
      { test: /\.ls$/, loader: 'livescrip' },
      { test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/ }
    ]
  }
}

5. Add webpack to watchers array in config/dev.exs:

use Mix.Config
# ...
config :appname, AppName.Endpoint,
  http: [port: 4000],
  debug_errors: true,
  code_reloader: true,
  cache_static_lookup: false,
  check_origin: false,
  watchers: [node: ~w{node_modules/webpack/bin/webpack.js --config config/webpack.js --color --watch-stdin}]
# ...

6. wite some code in your entry file:

echo "console.log 'Working!'" > web/client/app.ls

7. start server and enjoy:

mix phoenix.server start