Upgrade webpacker 2.0 -> 3.0

.babelrc

@@ -15,6 +15,7 @@
   ],
   "plugins": [
     "syntax-dynamic-import",
+    "transform-object-rest-spread",
     [
       "transform-class-properties",
       {

.gitignore

@@ -19,5 +19,4 @@
 .powder
 /public/packs
 /node_modules
-/public/packs
 /public/packs-test

.postcssrc.yml

@@ -1,4 +1,4 @@
 plugins:
   postcss-smart-import: {}
-  precss: {}
   autoprefixer: {}
+  postcss-cssnext: {}

Gemfile

@@ -8,7 +8,7 @@ end
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '~> 5.1.2'
-gem 'webpacker', '~> 2.0'
+gem 'webpacker', '~> 3.0'
 
 # Use postgresql as the database for Active Record
 gem 'pg', '~> 0.18'

Gemfile.lock

@@ -242,6 +242,8 @@ GEM
     public_suffix (2.0.5)
     puma (3.9.1)
     rack (2.0.3)
+    rack-proxy (0.6.2)
+      rack
     rack-test (0.6.3)
       rack (>= 1.0)
     rails (5.1.2)
@@ -366,9 +368,9 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
-    webpacker (2.0)
+    webpacker (3.0.1)
       activesupport (>= 4.2)
-      multi_json (~> 1.2)
+      rack-proxy (>= 0.6.1)
       railties (>= 4.2)
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
@@ -424,7 +426,7 @@ DEPENDENCIES
   tzinfo-data
   uglifier (>= 1.3.0)
   web-console (>= 3.3.0)
-  webpacker (~> 2.0)
+  webpacker (~> 3.0)
 
 RUBY VERSION
    ruby 2.4.1p111

Procfile

@@ -1,3 +1,2 @@
 release: bundle exec rake db:migrate
 web: rails s
-webpack: ./bin/webpack-dev-server

README.md

@@ -18,12 +18,10 @@ $ bundle install
 $ rake db:create
 $ rake db:migrate
 $ ./bin/yarn install
-$ foreman start
+$ rails s
 ```
 
-> Note: This will start `rails` on port `5000` and `webpack-dev-server` on `8080`
-
-You should now be able to see the site on http://localhost:5000/
+You should now be able to see the site on http://localhost:3000/
 
 ### Setting up with Docker
 
@@ -40,29 +38,12 @@ $ docker-compose run web rake db:setup
 $ open http://localhost:3000
 ```
 
-You will still need to run the webpack-dev-server on your local machine.
-
 To stop the server cleanly run:
 
 ```
 $ docker-compose down
 ```
 
-### Compiling assets
-
-To compile assets in runtime simply start the webpack server with:
-
-```
-$ ./bin/webpack-dev-server
-```
-
-You can run both the Rails server and Webpack simultaneously using Foreman:
-
-```
-$ foreman start
-$ open http://localhost:5000
-```
-
 ### Features
 
 - A powerful markup engine with pipeline (see [this blog post](https://lab.io/articles/2017/02/12/extending-markdown-with-middleware/) for details on how this works).
@@ -112,38 +93,6 @@ This is because Docker wasn't shut down cleanly. To fix this run:
 $ docker-compose run web rm /myapp/tmp/pids/server.pid
 ```
 
-#### A webpack error occurs during setup
-
-Run the `webpack-dev-server` like so:
-
-```
-$ ./bin/webpack-dev-server
-```
-
-#### `/packs/application.js` can not be found or returns a status code of `404`
-
-First check that you are running the `webpack-dev-server`. It can be run like so:
-
-```
-$ ./bin/webpack-dev-server
-```
-
-If you are running `webpack-dev-server` then give it a minute or check the output of your terminal as the initial compilation can take up to a minute on some systems.
-
-If this still doesn't solve your issue check nothing else is using the same port (since it does not raise any exceptions when this is the case). This is commonly used by Applications like Sketch.
-
-You can check what processes or applications are using this port by running:
-
-```
-$ lsof -i tcp:8080
-```
-
-If you want to kill the process that is blocking this port run the following replacing `<PID>` with the PID of found in the last command:
-
-```
-$ kill <PID>
-```
-
 #### I get an exception `PG::ConnectionBad - could not connect to server: Connection refused` when I try to run the app.
 
 This error indicates that PostgreSQL is not running. If you installed PostgreSQL using `brew` you can get information about how to start it by running:

bin/webpack

@@ -2,7 +2,6 @@
 $stdout.sync = true
 
 require "shellwords"
-require "yaml"
 
 ENV["RAILS_ENV"] ||= "development"
 RAILS_ENV = ENV["RAILS_ENV"]
@@ -20,9 +19,9 @@ unless File.exist?(WEBPACK_CONFIG)
   exit!
 end
 
-newenv  = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
-cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
+env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
+cmd = [ "#{NODE_MODULES_PATH}/.bin/webpack", "--config", WEBPACK_CONFIG ] + ARGV
 
 Dir.chdir(APP_PATH) do
-  exec newenv, *cmdline
+  exec env, *cmd
 end

bin/webpack-dev-server

@@ -3,6 +3,7 @@ $stdout.sync = true
 
 require "shellwords"
 require "yaml"
+require "socket"
 
 ENV["RAILS_ENV"] ||= "development"
 RAILS_ENV = ENV["RAILS_ENV"]
@@ -13,31 +14,55 @@ NODE_ENV = ENV["NODE_ENV"]
 APP_PATH          = File.expand_path("../", __dir__)
 CONFIG_FILE       = File.join(APP_PATH, "config/webpacker.yml")
 NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
-WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/development.js")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js")
+
+DEFAULT_LISTEN_HOST_ADDR = NODE_ENV == 'development' ? 'localhost' : '0.0.0.0'
 
 def args(key)
   index = ARGV.index(key)
   index ? ARGV[index + 1] : nil
 end
 
 begin
-  dev_server = YAML.load_file(CONFIG_FILE)["development"]["dev_server"]
+  dev_server = YAML.load_file(CONFIG_FILE)[RAILS_ENV]["dev_server"]
 
-  DEV_SERVER_HOST = "http#{"s" if args('--https') || dev_server["https"]}://#{args('--host') || dev_server["host"]}:#{args('--port') || dev_server["port"]}"
+  HOSTNAME          = args('--host') || dev_server["host"]
+  PORT              = args('--port') || dev_server["port"]
+  HTTPS             = ARGV.include?('--https') || dev_server["https"]
+  DEV_SERVER_ADDR   = "http#{"s" if HTTPS}://#{HOSTNAME}:#{PORT}"
+  LISTEN_HOST_ADDR  = args('--listen-host') || DEFAULT_LISTEN_HOST_ADDR
 
 rescue Errno::ENOENT, NoMethodError
-  puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
-  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  $stdout.puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
+  $stdout.puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+begin
+  server = TCPServer.new(LISTEN_HOST_ADDR, PORT)
+  server.close
+
+rescue Errno::EADDRINUSE
+  $stdout.puts "Another program is running on port #{PORT}. Set a new port in #{CONFIG_FILE} for dev_server"
   exit!
 end
 
-newenv = {
-  "NODE_PATH" => NODE_MODULES_PATH.shellescape,
-  "ASSET_HOST" => DEV_SERVER_HOST.shellescape
-}.freeze
+# Delete supplied host, port and listen-host CLI arguments
+["--host", "--port", "--listen-host"].each do |arg|
+  ARGV.delete(args(arg))
+  ARGV.delete(arg)
+end
+
+env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
 
-cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG] + ARGV
+cmd = [
+  "#{NODE_MODULES_PATH}/.bin/webpack-dev-server", "--progress", "--color",
+  "--config", WEBPACK_CONFIG,
+  "--host", LISTEN_HOST_ADDR,
+  "--public", "#{HOSTNAME}:#{PORT}",
+  "--port", PORT.to_s
+] + ARGV
 
 Dir.chdir(APP_PATH) do
-  exec newenv, *cmdline
+  exec env, *cmd
 end

config/webpack/development.js

@@ -1,32 +1,3 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
+const environment = require('./environment')
 
-const merge = require('webpack-merge')
-const sharedConfig = require('./shared.js')
-const { settings, output } = require('./configuration.js')
-
-module.exports = merge(sharedConfig, {
-  devtool: 'cheap-eval-source-map',
-
-  stats: {
-    errorDetails: true
-  },
-
-  output: {
-    pathinfo: true
-  },
-
-  devServer: {
-    clientLogLevel: 'none',
-    https: settings.dev_server.https,
-    host: settings.dev_server.host,
-    port: settings.dev_server.port,
-    contentBase: output.path,
-    publicPath: output.publicPath,
-    compress: true,
-    headers: { 'Access-Control-Allow-Origin': '*' },
-    historyApiFallback: true,
-    watchOptions: {
-      ignored: /node_modules/
-    }
-  }
-})
+module.exports = environment.toWebpackConfig()

config/webpack/environment.js

@@ -0,0 +1,3 @@
+const { environment } = require('@rails/webpacker')
+
+module.exports = environment