Update to Webpacker 3

Author: citizen428

.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": "> 1%",
+        "uglify": true
+      },
+      "useBuiltIns": true
+    }]
+  ],
+
+  "plugins": [
+    "syntax-dynamic-import",
+    "transform-object-rest-spread",
+    ["transform-class-properties", { "spec": true }]
+  ]
+}

.gitignore

@@ -13,7 +13,6 @@
 !/log/.keep
 !/tmp/.keep
 
-/node_modules
 /yarn-error.log
 
 .byebug_history
@@ -23,3 +22,8 @@
 
 # Figaro
 config/application.yml
+
+# Webpacker
+/public/packs
+/public/packs-test
+/node_modules

.postcssrc.yml

@@ -0,0 +1,3 @@
+plugins:
+  postcss-smart-import: {}
+  postcss-cssnext: {}

Gemfile

@@ -14,6 +14,9 @@ ruby File.read(version_file).strip
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '~> 5.1.3'
 
+# Use newest version of webpacker explicitly until Rails updates
+gem 'webpacker', '~> 3.0'
+
 # Use postgresql as the database for Active Record
 gem 'pg', '~> 0.18'
 

Gemfile.lock

@@ -169,6 +169,8 @@ GEM
       rack (>= 1.2.0)
     rack-protection (2.0.0)
       rack
+    rack-proxy (0.6.2)
+      rack
     rack-test (0.6.3)
       rack (>= 1.0)
     rack-timeout (0.4.2)
@@ -302,6 +304,10 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff
+    webpacker (3.0.1)
+      activesupport (>= 4.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 4.2)
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.2)
@@ -356,6 +362,7 @@ DEPENDENCIES
   uglifier (>= 1.3.0)
   web-console (>= 3.3.0)
   webmock
+  webpacker (~> 3.0)
 
 RUBY VERSION
    ruby 2.4.1p111

app/javascript/packs/application.js

@@ -0,0 +1,10 @@
+/* eslint no-console:0 */
+// 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,27 @@
+#!/usr/bin/env ruby
+$stdout.sync = true
+
+require "shellwords"
+
+ENV["RAILS_ENV"] ||= "development"
+RAILS_ENV = ENV["RAILS_ENV"]
+
+ENV["NODE_ENV"] ||= RAILS_ENV
+NODE_ENV = ENV["NODE_ENV"]
+
+APP_PATH          = File.expand_path("../", __dir__)
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js")
+
+unless File.exist?(WEBPACK_CONFIG)
+  puts "Webpack configuration not found."
+  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
+cmd = [ "#{NODE_MODULES_PATH}/.bin/webpack", "--config", WEBPACK_CONFIG ] + ARGV
+
+Dir.chdir(APP_PATH) do
+  exec env, *cmd
+end

bin/webpack-dev-server

@@ -0,0 +1,68 @@
+#!/usr/bin/env ruby
+$stdout.sync = true
+
+require "shellwords"
+require "yaml"
+require "socket"
+
+ENV["RAILS_ENV"] ||= "development"
+RAILS_ENV = ENV["RAILS_ENV"]
+
+ENV["NODE_ENV"] ||= RAILS_ENV
+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/#{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)[RAILS_ENV]["dev_server"]
+
+  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
+  $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
+
+# 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 env, *cmd
+end

config/webpack/development.js

@@ -0,0 +1,3 @@
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

config/webpack/environment.js

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

config/webpack/production.js

@@ -0,0 +1,3 @@
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

config/webpack/test.js

@@ -0,0 +1,3 @@
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

config/webpacker.yml

@@ -0,0 +1,56 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+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:
+    - .coffee
+    - .erb
+    - .js
+    - .jsx
+    - .ts
+    - .vue
+    - .sass
+    - .scss
+    - .css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+  compile: true
+
+  dev_server:
+    host: localhost
+    port: 3035
+    hmr: false
+    https: false
+
+test:
+  <<: *default
+  compile: true
+
+  # 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

package.json

@@ -2,6 +2,7 @@
   "name": "rails_new",
   "private": true,
   "dependencies": {
+    "@rails/webpacker": "^3.0.1",
     "bootstrap": "4.0.0-beta",
     "jquery": "^3.2.1",
     "jquery-ujs": "^1.2.2",
@@ -12,6 +13,7 @@
     "eslint-config-airbnb": "^15.0.1",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^5.0.3",
-    "eslint-plugin-react": "^7.0.1"
+    "eslint-plugin-react": "^7.0.1",
+    "webpack-dev-server": "^2.7.1"
   }
 }