Webpacker 3 / React 16

.babelrc

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

.postcssrc.yml

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

Gemfile

@@ -19,7 +19,7 @@ gem 'puma'
 gem 'react-rails'
 gem 'scenic'
 gem 'slim-rails'
-gem 'webpacker', '~> 2.0'
+gem 'webpacker'
 
 group :development, :test do
   gem 'dotenv-rails'

Gemfile.lock

@@ -64,7 +64,7 @@ GEM
       railties (>= 3.2, < 5.2)
     em-proxy (0.1.9)
       eventmachine
-    erubi (1.6.1)
+    erubi (1.7.0)
     eventmachine (1.0.9.1)
     execjs (2.7.0)
     facter (2.5.1)
@@ -97,7 +97,8 @@ GEM
       guard (>= 2.0.0)
       guard-compat (~> 1.0)
     http-parser-lite (0.6.0)
-    i18n (0.8.6)
+    i18n (0.9.0)
+      concurrent-ruby (~> 1.0)
     iniparse (1.4.4)
     invoker (1.5.5)
       colorize (~> 0.8.1)
@@ -129,7 +130,6 @@ GEM
     mime-types-data (3.2016.0521)
     mini_portile2 (2.3.0)
     minitest (5.10.3)
-    multi_json (1.12.2)
     nenv (0.3.0)
     newrelic_rpm (4.5.0.337)
     nio4r (2.1.0)
@@ -145,11 +145,13 @@ GEM
     pgreset (0.1.1)
     popper_js (1.12.5)
     powerpack (0.1.1)
-    pry (0.11.1)
+    pry (0.11.2)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
     puma (3.10.0)
     rack (2.0.3)
+    rack-proxy (0.6.2)
+      rack
     rack-test (0.7.0)
       rack (>= 1.0, < 3)
     rack-toolbar (0.1.4)
@@ -187,29 +189,29 @@ GEM
     rb-fsevent (0.10.2)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
-    react-rails (2.3.0)
+    react-rails (2.3.1)
       babel-transpiler (>= 0.7.0)
       connection_pool
       execjs
       railties (>= 3.2)
       tilt
-    redis (3.3.5)
-    redis-actionpack (5.0.1)
+    redis (4.0.1)
+    redis-actionpack (5.0.2)
       actionpack (>= 4.0, < 6)
       redis-rack (>= 1, < 3)
-      redis-store (>= 1.1.0, < 1.4.0)
-    redis-activesupport (5.0.3)
+      redis-store (>= 1.1.0, < 2)
+    redis-activesupport (5.0.4)
       activesupport (>= 3, < 6)
-      redis-store (~> 1.3.0)
-    redis-rack (2.0.2)
+      redis-store (>= 1.3, < 2)
+    redis-rack (2.0.3)
       rack (>= 1.5, < 3)
-      redis-store (>= 1.2, < 1.4)
+      redis-store (>= 1.2, < 2)
     redis-rails (5.0.2)
       redis-actionpack (>= 5.0, < 6)
       redis-activesupport (>= 5.0, < 6)
       redis-store (>= 1.2, < 2)
-    redis-store (1.3.0)
-      redis (>= 2.2)
+    redis-store (1.4.1)
+      redis (>= 2.2, < 5)
     rubocop (0.51.0)
       parallel (~> 1.10)
       parser (>= 2.3.3.1, < 3.0)
@@ -233,7 +235,7 @@ GEM
     slim (3.0.8)
       temple (>= 0.7.6, < 0.9)
       tilt (>= 1.3.3, < 2.1)
-    slim-rails (3.1.2)
+    slim-rails (3.1.3)
       actionpack (>= 3.1)
       railties (>= 3.1)
       slim (~> 3.0)
@@ -267,9 +269,9 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
-    webpacker (2.0)
+    webpacker (3.0.2)
       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)
@@ -305,7 +307,7 @@ DEPENDENCIES
   spring-watcher-listen
   terminal-notifier-guard
   web-console (~> 3.0)
-  webpacker (~> 2.0)
+  webpacker
 
 RUBY VERSION
    ruby 2.4.2p198

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

config/webpack/production.js

@@ -1,35 +1,3 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
+const environment = require('./environment')
 
-/* eslint global-require: 0 */
-
-const webpack = require('webpack')
-const merge = require('webpack-merge')
-const CompressionPlugin = require('compression-webpack-plugin')
-const sharedConfig = require('./shared.js')
-
-module.exports = merge(sharedConfig, {
-  output: { filename: '[name]-[chunkhash].js' },
-  devtool: 'source-map',
-  stats: 'normal',
-
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      minimize: true,
-      sourceMap: true,
-
-      compress: {
-        warnings: false
-      },
-
-      output: {
-        comments: false
-      }
-    }),
-
-    new CompressionPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
-    })
-  ]
-})
+module.exports = environment.toWebpackConfig()

config/webpack/test.js

@@ -1,6 +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')
-
-module.exports = merge(sharedConfig, {})
+module.exports = environment.toWebpackConfig()

config/webpacker.yml

@@ -4,6 +4,14 @@ 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
@@ -23,15 +31,33 @@ default: &default
 
 development:
   <<: *default
+  compile: true
 
+  # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
-    host: surf.dev
     https: true
+    host: localhost
+    port: 3035
+    public: localhost:3035
+    hmr: false
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    disable_host_check: true
+    use_local_ip: 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

invoker.ini

@@ -4,9 +4,6 @@ command = RUBY_DEBUG_PORT=4444 bin/rails s -p $PORT -b 127.0.0.1
 [guard]
 command = bin/guard -i
 
-[webpack]
-command = bin/webpack-dev-server --port $PORT
-
 [browser-sync]
 command = yarn run browser-sync start --files 'app' --https --no-log-snippet --no-ui --port 9500
 port = 9500