Upgrade Webpacker to version 3.0.1 (#5122)

Gemfile

@@ -67,7 +67,7 @@ gem 'sprockets-rails', '~> 3.2', require: 'sprockets/railtie'
 gem 'statsd-instrument', '~> 2.1'
 gem 'twitter-text', '~> 1.14'
 gem 'tzinfo-data', '~> 1.2017'
-gem 'webpacker', '~> 2.0'
+gem 'webpacker', '~> 3.0'
 gem 'webpush'
 
 gem 'json-ld-preloaded', '~> 2.2.1'

Gemfile.lock

@@ -335,6 +335,8 @@ GEM
     rack-cors (0.4.1)
     rack-protection (2.0.0)
       rack
+    rack-proxy (0.6.2)
+      rack
     rack-test (0.7.0)
       rack (>= 1.0, < 3)
     rack-timeout (0.4.2)
@@ -510,9 +512,9 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff
-    webpacker (2.0)
+    webpacker (3.0.1)
       activesupport (>= 4.2)
-      multi_json (~> 1.2)
+      rack-proxy (>= 0.6.1)
       railties (>= 4.2)
     webpush (0.3.2)
       hkdf (~> 0.2)
@@ -621,7 +623,7 @@ DEPENDENCIES
   tzinfo-data (~> 1.2017)
   uglifier (~> 3.2)
   webmock (~> 3.0)
-  webpacker (~> 2.0)
+  webpacker (~> 3.0)
   webpush
 
 RUBY VERSION

Procfile.dev

@@ -1,4 +1,4 @@
 web: PORT=3000 bundle exec puma -C config/puma.rb
 sidekiq: PORT=3000 bundle exec sidekiq
 stream: PORT=4000 yarn run start
-webpack: ./bin/webpack-dev-server --host 0.0.0.0
+webpack: ./bin/webpack-dev-server --listen-host 0.0.0.0

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 }
+env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
-cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
+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,7 +14,9 @@ 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)
@@ -21,23 +24,45 @@ def args(key)
 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"]}://#{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}."
+  $stdout.puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
-  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  $stdout.puts "Please run bundle exec rails webpacker:install to install webpacker"
   exit!
 end
 
-newenv = {
+begin
-  "NODE_PATH" => NODE_MODULES_PATH.shellescape,
+  server = TCPServer.new(LISTEN_HOST_ADDR, PORT)
-  "ASSET_HOST" => DEV_SERVER_HOST.shellescape
+  server.close
-}.freeze
 
-cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG] + ARGV
+rescue Errno::EADDRINUSE
+  $stdout.puts "Another program is running on port #{PORT}. Set a new port in #{CONFIG_FILE} for dev_server"
+  exit!
+end
+
+# 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 }
+
+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/webpacker.yml

@@ -4,6 +4,15 @@ default: &default
   source_path: app/javascript
   source_entry_path: packs
   public_output_path: packs
+  cache_path: tmp/cache/webpacker
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  resolved_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
   extensions:
     - .js
     - .sass
@@ -17,16 +26,25 @@ default: &default
 
 development:
   <<: *default
+  compile: true
 
   dev_server:
-    host: 127.0.0.1
+    host: localhost
-    port: 8080
+    port: 3035
+    hmr: false
     https: false
 
 test:
   <<: *default
 
+  # Compile test packs to a separate directory
   public_output_path: packs-test
 
 production:
   <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true

lib/tasks/assets.rake

@@ -16,7 +16,7 @@ end
 
 if Rake::Task.task_defined?('assets:precompile')
   Rake::Task['assets:precompile'].enhance do
-    Webpacker::Manifest.load
+    Webpacker.manifest.refresh
     Rake::Task['assets:generate_static_pages'].invoke
   end
 end