Webpack with CoffeeScript loader

application.coffee

# app/javascript/packs/application.coffee

import 'selectize/dist/css/selectize.default'
import 'ladda/dist/ladda-themeless.min'

import 'jquery'
import 'foundation-sites'
import * as Ladda from 'ladda'
import '../src/js/init'
import '../src/js/app.draggable_images'
import '../src/js/app.data_table'
import '../src/js/app.form'
import '../src/js/app.spreadsheet_table'

window.Sortable = require('sortablejs')

$(document).on 'turbolinks:load', ->
  console.log 'turbolinks load (/javascript)'
  draggableImages = new App.DraggableImages('google-photos')
  draggableImages.render()

Rails.start()
Turbolinks.start()

coffee.js

// config/webpack/loaders/coffee.js

module.exports = {
  test: /\.coffee(\.erb)?$/,
  use: [{
    loader: 'coffee-loader'
  }]
}

datatables.js

// config/webpack/loaders/datatables.js

module.exports = {
  test: /datatables\.net.*/,
  loader: 'imports-loader?define=>false'
}

development.js

// config/webpack/development.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment//.toWebpackConfig()

environment.js

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const coffee =  require('./loaders/coffee')
const datatables = require('./loaders/datatables')
const merge = require('webpack-merge')
const webpack = require('webpack');

environment.loaders.append('coffee', coffee)
environment.loaders.append('datatables', datatables)

module.exports = environment

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    Ladda: 'ladda',
    Rails: 'rails-ujs',
    Turbolinks: 'turbolinks'
  })
)

const envConfig = module.exports = environment
const aliasConfig = module.exports = {
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery'
    }
  }
}

module.exports = merge(envConfig.toWebpackConfig(), aliasConfig)

production.js

// config/webpack/production.js

process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment = require('./environment')

module.exports = environment//.toWebpackConfig()