Add and install webpacker

.gitignore

@@ -27,3 +27,5 @@
 
 # Carrierwave uploads
 /public/uploads
+/public/packs
+/node_modules

Gemfile

@@ -27,6 +27,8 @@ gem 'normalize-rails'
 gem 'uglifier', '>= 1.3.0'
 gem 'jquery-rails'
 
+gem 'webpacker'
+
 # Frontend
 gem 'jbuilder', '~> 2.0'
 gem 'hamlit'

Gemfile.lock

@@ -372,6 +372,10 @@ GEM
       faraday
     warden (1.2.7)
       rack (>= 1.0)
+    webpacker (1.0)
+      activesupport (>= 5.0)
+      multi_json (~> 1.2)
+      railties (>= 5.0)
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.2)
@@ -434,6 +438,7 @@ DEPENDENCIES
   timecop
   uglifier (>= 1.3.0)
   visdiff
+  webpacker
 
 RUBY VERSION
    ruby 2.4.0p0

app/javascript/packs/application.js

@@ -0,0 +1,9 @@
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+console.log('Hello World from Webpacker')

bin/webpack

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+RAILS_ENV = ENV['RAILS_ENV'] || 'development'
+NODE_ENV  = ENV['NODE_ENV'] || RAILS_ENV
+
+APP_PATH = File.expand_path('../', __dir__)
+
+SET_NODE_PATH  = "NODE_PATH=#{APP_PATH}/node_modules"
+WEBPACK_BIN    = "./node_modules/webpack/bin/webpack.js"
+WEBPACK_CONFIG = "#{APP_PATH}/config/webpack/#{NODE_ENV}.js"
+
+Dir.chdir(APP_PATH) do
+  exec "#{SET_NODE_PATH} #{WEBPACK_BIN} --config #{WEBPACK_CONFIG} #{ARGV.join(" ")}"
+end

bin/webpack-dev-server

@@ -0,0 +1,22 @@
+#!/usr/bin/env ruby
+
+RAILS_ENV = ENV['RAILS_ENV'] || 'development'
+NODE_ENV  = ENV['NODE_ENV'] || RAILS_ENV
+
+APP_PATH = File.expand_path('../', __dir__)
+
+SET_NODE_PATH  = "NODE_PATH=#{APP_PATH}/node_modules"
+WEBPACKER_BIN  = "./node_modules/.bin/webpack-dev-server"
+WEBPACK_CONFIG = "#{APP_PATH}/config/webpack/#{NODE_ENV}.js"
+
+# Warn the user if the configuration is not set
+RAILS_ENV_CONFIG = File.join("config", "environments", "#{RAILS_ENV}.rb")
+
+# Look into the environment file for a non-commented variable declaration
+unless File.foreach(File.join(APP_PATH, RAILS_ENV_CONFIG)).detect { |line| line.match(/^\s*[^#]*config\.x\.webpacker\[\:dev_server_host\].*=/) }
+  puts "Warning: if you want to use webpack-dev-server, you need to tell Webpacker to serve asset packs from it. Please set config.x.webpacker[:dev_server_host] in #{RAILS_ENV_CONFIG}.\n\n"
+end
+
+Dir.chdir(APP_PATH) do
+  exec "#{SET_NODE_PATH} #{WEBPACKER_BIN} --config #{WEBPACK_CONFIG} --content-base #{APP_PATH}/public/packs #{ARGV.join(" ")}"
+end

bin/webpack-watcher

@@ -0,0 +1,7 @@
+#!/usr/bin/env ruby
+
+BIN_PATH = File.expand_path('.', __dir__)
+
+Dir.chdir(BIN_PATH) do
+  exec "./webpack --watch --progress --color #{ARGV.join(" ")}"
+end

bin/yarn

@@ -0,0 +1,10 @@
+#!/usr/bin/env ruby
+VENDOR_PATH = File.expand_path('..', __dir__)
+Dir.chdir(VENDOR_PATH) do
+  begin
+    exec "yarnpkg #{ARGV.join(" ")}"
+  rescue Errno::ENOENT
+    puts "Yarn executable was not detected in the system."
+    puts "Download Yarn at https://yarnpkg.com/en/docs/install"
+  end
+end

config/environments/development.rb

@@ -1,4 +1,7 @@
 Rails.application.configure do
+  # Make javascript_pack_tag load assets from webpack-dev-server.
+  # config.x.webpacker[:dev_server_host] = "http://localhost:8080"
+
   # Settings specified here will take precedence over those in config/application.rb.
 
   # LiveReload!

config/environments/production.rb

@@ -1,4 +1,7 @@
 Rails.application.configure do
+  # Make javascript_pack_tag lookup digest hash to enable long-term caching
+  config.x.webpacker[:digesting] = true
+
   # Settings specified here will take precedence over those in config/application.rb.
   config.active_job.queue_adapter = :sidekiq
 

config/webpack/development.js

@@ -0,0 +1,24 @@
+// Note: You must restart bin/webpack-watcher for changes to take effect
+
+var webpack = require('webpack')
+var merge   = require('webpack-merge')
+
+var sharedConfig = require('./shared.js')
+
+module.exports = merge(sharedConfig.config, {
+  devtool: 'sourcemap',
+
+  stats: {
+    errorDetails: true
+  },
+
+  output: {
+    pathinfo: true
+  },
+
+  plugins: [
+    new webpack.LoaderOptionsPlugin({
+      debug: true
+    })
+  ]
+})

config/webpack/production.js

@@ -0,0 +1,16 @@
+// Note: You must restart bin/webpack-watcher for changes to take effect
+
+var webpack = require('webpack')
+var merge   = require('webpack-merge')
+
+var sharedConfig = require('./shared.js')
+
+module.exports = merge(sharedConfig.config, {
+  output: { filename: '[name]-[hash].js' },
+
+  plugins: [
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ]
+})

config/webpack/shared.js

@@ -0,0 +1,69 @@
+// Note: You must restart bin/webpack-watcher for changes to take effect
+
+var webpack = require('webpack')
+var path = require('path')
+var process = require('process')
+var glob = require('glob')
+var extname = require('path-complete-extname')
+var distDir = process.env.WEBPACK_DIST_DIR
+
+if(distDir === undefined) {
+  distDir = 'packs'
+}
+
+config = {
+  entry: glob.sync(path.join('app', 'javascript', 'packs', '*.js*')).reduce(
+    function(map, entry) {
+      var basename = path.basename(entry, extname(entry))
+      map[basename] = path.resolve(entry)
+      return map
+    }, {}
+  ),
+
+  output: { filename: '[name].js', path: path.resolve('public', distDir) },
+
+  module: {
+    rules: [
+      {
+        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: [
+    new webpack.EnvironmentPlugin(Object.keys(process.env))
+  ],
+
+  resolve: {
+    extensions: [ '.js' ],
+    modules: [
+      path.resolve('app/javascript'),
+      path.resolve('node_modules')
+    ]
+  },
+
+  resolveLoader: {
+    modules: [ path.resolve('node_modules') ]
+  }
+}
+
+module.exports = {
+  distDir: distDir,
+  config: config
+}

package.json

@@ -7,8 +7,8 @@
   },
   "private": true,
   "scripts": {
-    "watch": "webpack --watch --progress",
-    "compile": "webpack"
+    "watch": "bin/webpack-watcher",
+    "compile": "bin/webpack"
   },
   "repository": {
     "type": "git",
@@ -19,27 +19,32 @@
   "homepage": "http://porkchop.club",
   "dependencies": {
     "actioncable": "^5.0.0",
-    "babel-core": "^6.21.0",
-    "babel-loader": "^6.2.10",
+    "babel-core": "^6.23.1",
+    "babel-loader": "^6.3.2",
     "babel-plugin-transform-object-rest-spread": "^6.22.0",
     "babel-polyfill": "^6.16.0",
     "babel-preset-env": "^1.1.4",
+    "babel-preset-latest": "^6.22.0",
     "babel-preset-react": "^6.22.0",
     "chart.js": "^2.2.2",
     "classnames": "^2.2.5",
     "exports-loader": "^0.6.3",
+    "glob": "^7.1.1",
     "imports-loader": "^0.6.5",
     "jquery": "^3.1.0",
     "jquery-ujs": "^1.2.2",
     "lodash": "^4.17.4",
+    "path-complete-extname": "^0.1.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-redux": "^5.0.2",
     "redux": "^3.6.0",
     "redux-actions": "^1.2.1",
     "redux-thunk": "^2.2.0",
     "reselect": "^2.5.4",
-    "webpack": "^2.1.0-beta.25",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.1",
+    "webpack-merge": "^3.0.0",
     "whatwg-fetch": "^1.0.0"
   }
 }