webpakcer.gemにscssのビルドを加えて、大きめの依存ライブラリを別ファイルに分けて吐くようにしたwebpack.cnofig

development.js

// Note: You must restart bin/webpack-watcher for changes to take effect

var path    = require('path')
var webpack = require('webpack')
var merge   = require('webpack-merge')

var config = require('./shared.js')

var devconfig = {
  devtool: 'sourcemap',

  stats: {
    errorDetails: true
  },

  output: {
    pathinfo: true
  },

  plugins: [
    new webpack.LoaderOptionsPlugin({
      debug: true
    })
  ]
}

module.exports = [merge(config[0], devconfig), merge(config[1], devconfig)]

production.js

// Note: You must restart bin/webpack-watcher for changes to take effect

var path    = require('path')
var webpack = require('webpack')
var merge   = require('webpack-merge')

var config = require('./shared.js')

module.exports = [
  merge(config[0], {
    output: { filename: '[name]-[hash].js' },

    plugins: [
      new webpack.LoaderOptionsPlugin({
        minimize: true
      })
    ]
  }),
  merge(config[1], {
    output: { filename: '[name]-[hash].css' },

    plugins: [
      new webpack.LoaderOptionsPlugin({
        minimize: true
      })
    ]
  })
]

share.js

// Note: You must restart bin/webpack-watcher for changes to take effect                                                                                                                                                                                                         [91/9220]

var webpack = require('webpack')
var merge   = require('webpack-merge')
var path = require('path')
var glob = require('glob')
var extname = require('path-complete-extname')

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = [{
  entry: merge(
    glob.sync(path.join('..', 'app', 'javascript', 'packs', '**', '*.js*')).reduce(
      function(map, entry) {
        var relpath = path.relative(path.join('..', 'app', 'javascript', 'packs'), entry);

        var basename = path.basename(relpath, extname(relpath));
        var dirname = path.dirname(relpath);
        if(dirname != ".") {
          basename = path.join(dirname, basename)
        }

        map[basename] = entry
        return map
      }, {}
    ),
    {
      // libraries js file
      vendors: [
        'jquery',
        'datatables.net',
        'datatables.net-bs',
        "moment",
        "bootstrap-sass",
        "bootstrap-datepicker",
        "urijs",
      ]
    }
  ),
  
  output: { filename: '[name].js', path: path.resolve('..', 'public', 'packs') },

  module: {
    rules: [
      { test: /\.coffee(.erb)?$/, loader: "coffee-loader" },
      {
        test: /\.js(.erb)?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [ 'latest', { 'es2015': { 'modules': false } } ]
          ]
        }
      },
      {
        test: /.erb$/,
        enforce: 'pre',
        exclude: /node_modules/,
        loader: 'rails-erb-loader',
        options: {
          runner: 'DISABLE_SPRING=1 ../bin/rails runner'
        }
      },
    ]
  },

  plugins: [
    // take the vendors chunk and create a vendors.js from the "vendors" in entry section.
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.js'}),

    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $:      'jquery',
        jquery: 'jquery',
        _:      'underscore',
        moment: 'moment',
        urijs:  "urijs",
    })
  ],

  resolve: {
    extensions: [ '.js', '.coffee' ],
    modules: [
      path.resolve('../app/javascript'),
      path.resolve('../vendor/node_modules')
    ]
  },

  resolveLoader: {
    modules: [ path.resolve('../vendor/node_modules') ]
  }
}, {
  // css
  entry: glob.sync(path.join('..', 'app', 'scss', 'packs', '**', '*.scss.js')).reduce(
    function(map, entry) {
      var relpath = path.relative(path.join('..', 'app', 'scss', 'packs'), entry);
      console.log(entry)
      console.log(relpath)

      var basename = path.basename(relpath, '.scss.js');
      var dirname = path.dirname(relpath);
      if(dirname != ".") {
        basename = path.join(dirname, basename)
      }

      console.log(basename)
      map[basename] = entry
      return map
    }, {}
  ),

  output: { filename: '[name].css', path: path.resolve('..', 'public', 'packs') },

  module: {
    rules: [
      {
        test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
        use: 'file-loader'
      },
      {
        test: /\.(jpg|gif|png)$/,
        use: 'url-loader'
      },
      {
        test: /\.(sass|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            'css-loader?sourceMap',
            'sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true',
            // 'css-loader',
            // 'sass-loader',
          ]
        })
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: 'css-loader'
        })
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin('[name].css'),
  ],

  resolve: {
    extensions: [ '.scss'],
    modules: [
      path.resolve('../app/scss'),
      path.resolve('../vendor/node_modules')
    ]
  }
}]