Using webpack in the Rails asset pipeline

main.js.erb

<% require Bundler.root.join('lib/webpack') %>
<% Webpack.dependencies.each{ |dependency| depend_on(dependency) } %>
<%= begin
  Webpack.compile
rescue Webpack::CompilationError => error
  raise unless Rails.env.development?
  html = "<h1>Webpack Error</h1><pre>#{Rack::Utils.escape_html(error.message)}</pre>"
  "document.documentElement.innerHTML = #{html.inspect};"
end
%>

package.json

{
  "name": "LearnupNodeHelpers",
  "description": "Learnup Node Helpers",
  "version": "0.0.1",
  "devDependencies": {
    "babel-cli": "^6.8.0",
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.6.1",
    "bootstrap": "^4.0.0-alpha.2",
    "css-loader": "^0.23.1",
    "eslint": "1.7.1",
    "ie9_css_check": "0.1.1",
    "jake": "8.0.2",
    "jshint": "2.8.0",
    "node-sass": "^3.7.0",
    "rails-source-maps": "0.1.3",
    "react": "^15.0.2",
    "react-bootstrap-4": "^0.28.4-1",
    "react-dom": "^15.0.2",
    "sass-loader": "^3.2.0",
    "slack-node": "0.1.3",
    "style-loader": "^0.13.1",
    "underscore": "1.6.0",
    "webpack": "^1.13.0"
  }
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');

var RAILS_ROOT = __dirname;
var JAVASCRIPTS = path.resolve(RAILS_ROOT, 'app/assets/javascripts')
var STYLESHEETS = path.resolve(RAILS_ROOT, 'app/assets/stylesheets')

module.exports = {
  entry: path.resolve(JAVASCRIPTS, 'v3/index.js'),
  output: {
    path: path.resolve(RAILS_ROOT, 'tmp'),
    filename: 'v3.js'
  },
  devtool: 'inline-source-map',
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react', 'stage-0']
        }
      }
    ]
  }
};

webpack.rb

module Webpack
  CompilationError = Class.new(StandardError)

  WEBPACK_EXE = Bundler.root.join('node_modules/webpack/bin/webpack.js').to_s.freeze

  def self.compile
    puts "Running webpack...".blue
    start_time = Time.now
    webpack_output = `#{WEBPACK_EXE} 2>&1`
    puts "webpack took #{Time.now - start_time} seconds".blue
    if webpack_output.include?('Module build failed')
      raise Webpack::CompilationError, webpack_output
    end
    Bundler.root.join('tmp/v3.js').read
  end

  def self.dependencies
    Dir[Bundler.root.join('app/assets/javascripts/v3/**/*')]
  end
end