Webpacker を使わずに webpack で頑張る ref: http://qiita.com/yszk0123/items/95f4f08a255cf029fca8

application.html.erb

...
<%= stylesheet_link_tag 'frontend/vendor', media: :all %>
...
<%= javascript_include_tag 'frontend/manifest', 'frontend/vendor', 'frontend/application' %>
...

assets.rb

# webpack で public に出力したファイルを precompile 対象に含める
Rails.application.config.assets.precompile << /frontend\/.*\.(?:js|css)\z/

# Rails 3.x からデフォルトでは manifest ファイルのパスが動的に変わるようになった
# このままだと webpack から参照できないので静的なパスを指定
Rails.application.config.assets.manifest = Rails.root.join("config", "sprockets-manifest.json")

development.rb

# Rails assets に manifest を読み込ませる
config.assets.debug = false

file0.txt

app/
  views/
    layouts/
      application.html.erb
config/
  development.yml
frontend/
  node_modules/
  src/
    app.js
  webpack.config.babel.js
  package.json
public/
  assets/
    frontend/
      node_modules/
      app-xxx.js (xxx は digest)

webpack.config.babel.js

import ExtractTextPlugin from 'extract-text-webpack-plugin';
import WebpackSprocketsRailsManifestPlugin from 'webpack-sprockets-rails-manifest-plugin';
import path from 'path';
import webpack from 'webpack';

// digest 値を末尾に付与
// Sprokcets の付与する digest とは形式が違うが、無理に揃える必要もないので簡単な方法で
const FILENAME = '[name]-[chunkhash]';

const extractCSS = new ExtractTextPlugin(`${FILENAME}.css`);

export default {
  entry: {
    'frontend/vendor': [
      'jquery',
      'jquery-ujs',
      'font-awesome/css/font-awesome.css'
    ],
    'frontend/app': [
      './src/app.js'
    ]
  },
  output: {
    path: path.resolve(__dirname, '../public/assets'),
    filename: `${FILENAME}.js`,
    chunkFilename: `${FILENAME}.js`
  },
  plugins: [
    extractCSS,
    new webpack.optimize.CommonsChunkPlugin({
      name: [
        'frontend/vendor',
        'frontend/manifest'
      ],
      minChunks: Infinity
    }),
    new WebpackSprocketsRailsManifestPlugin({
      manifestFile: '../../config/sprockets-manifest.json'
    })
  ],
  module: {
    rules: [{
      test: /\.js$/,
      use: [
        'babel-loader'
      ]
    }, {
      test: /\.css$/,
      use: extractCSS.extract([
        'css-loader'
      ])
    }, {
      // ビルドしたアセットファイルを public 以下に配置
      test: /\.(jpeg|jpg|gif|png|svg|eot|woff|woff2|ttf|wav|mp3)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[path][name].[hash].[ext]',
          outputPath: 'frontend/images/',
          publicPath: '/assets/frontend/images/'
        }
      }
    }]
  }
};