Upgrade react-webpack-rails-tutorial to Webpacker Lite (#395)

* Update babel-preset-stage-2 * No logging of redux for tests * Update WebpackerLite to 2.0.4
shakacode · May 30, 2017 · 390519b · 390519b
1 parent be73c02
commit 390519b
Show file tree

Hide file tree

Showing 22 changed files with 433 additions and 343 deletions.
diff --git a/.gitignore b/.gitignore
@@ -27,7 +27,7 @@ vendor/ruby
 .ruby-gemset
 
 # Generated js bundles
-/app/assets/webpack/
+/public/webpack/
 
 # Rubymine/IntelliJ
 .idea

diff --git a/.ruby-version b/.ruby-version
@@ -1 +1 @@
-2.4.1
+ruby-2.4.1
diff --git a/Gemfile b/Gemfile
@@ -40,6 +40,8 @@ gem "rails-html-sanitizer"
 
 gem "react_on_rails", "8.0.0.beta.3"
 
+gem "webpacker_lite", "2.0.4"
+
 # See https://github.com/sstephenson/execjs#readme for more supported runtimes
 # mini_racer is probably faster than therubyracer
 gem "mini_racer"

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -288,6 +288,10 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
+    webpacker_lite (2.0.4)
+      activesupport (>= 4.2)
+      multi_json (~> 1.2)
+      railties (>= 4.2)
     websocket (1.2.4)
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
@@ -344,6 +348,7 @@ DEPENDENCIES
   spring-commands-rspec
   uglifier
   web-console
+  webpacker_lite (= 2.0.4)
 
 RUBY VERSION
    ruby 2.4.1p111

diff --git a/Procfile.dev b/Procfile.dev
@@ -7,7 +7,7 @@
 rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0
 
 # Run the hot reload server for client development
-hot-assets: sh -c 'rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
+hot-assets: sh -c 'rm -rf public/webpack/development || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
 
 # Render static client assets
 rails-static-client-assets: sh -c 'yarn run build:dev:client'

diff --git a/Procfile.hot b/Procfile.hot
@@ -6,7 +6,7 @@
 rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0
 
 # Run the hot reload server for client development
-hot-assets: sh -c 'rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
+hot-assets: sh -c 'rm -rf public/webpack/development || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
 
 # Keep the JS fresh for server rendering. Remove if not server rendering
 rails-server-assets: sh -c 'yarn run build:dev:server'
diff --git a/Procfile.static b/Procfile.static
@@ -2,7 +2,7 @@
 rails: REACT_ON_RAILS_ENV= rails s -b 0.0.0.0
 
 # Build client assets, watching for changes.
-rails-client-assets: rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && yarn run build:dev:client
+rails-client-assets: rm -rf public/webpack/development || true && bundle exec rake react_on_rails:locale && yarn run build:dev:client
 
 # Build server assets, watching for changes. Remove if not server rendering.
 rails-server-assets: yarn run build:dev:server
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -3,20 +3,17 @@
 <head>
   <title>RailsReactTutorial</title>
 
-  <%= env_stylesheet_link_tag(static: 'application_static',
-                              hot: 'application_non_webpack',
-                              media: 'all',
-                              'data-turbolinks-track' => "reload")  %>
+  <%= stylesheet_pack_tag('vendor-bundle',
+                          media: 'all',
+                          'data-turbolinks-track': true) %>
 
-  <!-- These do not use turbolinks, so no data-turbolinks-track -->
-  <!-- This is to load the hot assets. -->
-  <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
-                                       'http://localhost:3500/app-bundle.js']) %>
+  <%= stylesheet_pack_tag('app-bundle',
+                          media: 'all',
+                          'data-turbolinks-track': true) %>
+
+  <%= javascript_pack_tag('vendor-bundle', 'data-turbolinks-track': true) %>
+  <%= javascript_pack_tag('app-bundle', 'data-turbolinks-track': true) %>
 
-  <!-- These do use turbolinks -->
-  <%= env_javascript_include_tag(static: 'application_static',
-                                 hot: 'application_non_webpack',
-                                 'data-turbolinks-track' => "reload") %>
   <%= csrf_meta_tags %>
 </head>
 <body>

diff --git a/client/.babelrc b/client/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "stage-2", "react"]
 }
diff --git a/client/app/bundles/comments/startup/clientRegistration.jsx b/client/app/bundles/comments/startup/clientRegistration.jsx
@@ -17,7 +17,7 @@ import NavigationBarApp from './NavigationBarApp';
 addLocaleData([...en, ...de, ...ja, ...zh]);
 
 ReactOnRails.setOptions({
-  traceTurbolinks: TRACE_TURBOLINKS, // eslint-disable-line no-undef
+  traceTurbolinks: process.env.TRACE_TURBOLINKS, // eslint-disable-line no-undef
 });
 
 ReactOnRails.register({

diff --git a/client/app/libs/middlewares/loggerMiddleware.js b/client/app/libs/middlewares/loggerMiddleware.js
@@ -2,6 +2,12 @@
 
 export default function logger({ getState }) {
   return (next) => (action) => {
+    // TODO: Replace this file with redux-logger and move this conditional to helper
+    // TODO: where we're setting up the included middleware.
+    if (process.env.NODE_ENV !== 'development') {
+      return next(action);
+    }
+
     console.log('will dispatch', action);
 
     // Call the next dispatch method in the middleware chain.

diff --git a/client/package.json b/client/package.json
@@ -32,12 +32,12 @@
     "build:production:client": "NODE_ENV=production webpack --config webpack.client.rails.build.config.js",
     "build:production:server": "NODE_ENV=production webpack --config webpack.server.rails.build.config.js",
     "build:client": "webpack --config webpack.client.rails.build.config.js",
-    "build:dev:client": "webpack -w --config webpack.client.rails.build.config.js",
-    "build:dev:server": "webpack -w --config webpack.server.rails.build.config.js",
+    "build:dev:client": "NODE_ENV=development webpack -w --config webpack.client.rails.build.config.js",
+    "build:dev:server": "NODE_ENV=development webpack -w --config webpack.server.rails.build.config.js",
     "build:server": "webpack --config webpack.server.rails.build.config.js",
-    "build:test": "yarn run build:client && yarn run build:server",
-    "build:production": "yarn run build:production:client && yarn run build:production:server",
-    "hot-assets": "babel-node server-rails-hot.js",
+    "build:test": "rm -rf ../public/webpack/test && NODE_ENV=test yarn run build:client && NODE_ENV=test yarn run build:server",
+    "build:production": "rm -rf ../public/webpack/production && NODE_ENV=production yarn run build:production:client && yarn run build:production:server",
+    "hot-assets": "NODE_ENV=development babel-node server-rails-hot.js",
     "lint": "eslint --ext .js,.jsx ."
   },
   "dependencies": {
@@ -52,22 +52,25 @@
     "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
     "babel-runtime": "^6.23.0",
     "bootstrap-loader": "^2.0.0",
     "bootstrap-sass": "^3.3.7",
     "classnames": "^2.2.5",
+    "compression-webpack-plugin": "^0.3.2",
     "css-loader": "^0.28.0",
     "es5-shim": "^4.5.9",
     "estraverse": "^4.2.0",
     "expose-loader": "^0.7.3",
     "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.11.1",
+    "glob": "^7.1.1",
     "immutable": "^3.8.1",
     "imports-loader": "^0.7.1",
     "intl": "^1.2.5",
     "jquery": "^3.2.1",
     "jquery-ujs": "^1.2.2",
+    "js-yaml": "^3.8.2",
     "loader-utils": "^1.1.0",
     "lodash": "^4.17.4",
     "marked": "^0.3.6",
@@ -91,7 +94,9 @@
     "style-loader": "^0.16.1",
     "turbolinks": "^5.0.0",
     "url-loader": "^0.5.8",
-    "webpack": "^2.3.3"
+    "webpack": "^2.3.3",
+    "webpack-manifest-plugin": "^1.1.0",
+    "webpack-merge": "^4.1.0"
   },
   "devDependencies": {
     "babel-eslint": "^7.2.1",

diff --git a/client/server-rails-hot.js b/client/server-rails-hot.js
@@ -1,19 +1,25 @@
 /* eslint no-var: 0, no-console: 0, import/no-extraneous-dependencies: 0 */
 
 import webpack from 'webpack';
+
 import WebpackDevServer from 'webpack-dev-server';
 
 import webpackConfig from './webpack.client.rails.hot.config';
 
-const hotRailsPort = process.env.HOT_RAILS_PORT || 3500;
+const { resolve } = require('path');
+
+const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
+
+const configPath = resolve('..', 'config');
+const { hotReloadingUrl, hotReloadingPort, hotReloadingHostname } = webpackConfigLoader(configPath);
 
 const compiler = webpack(webpackConfig);
 
 const devServer = new WebpackDevServer(compiler, {
   proxy: {
-    '*': `http://lvh.me:${hotRailsPort}`,
+    '*': `http://lvh.me:${hotReloadingPort}`,
   },
-  publicPath: webpackConfig.output.publicPath,
+  contentBase: hotReloadingUrl,
   hot: true,
   inline: true,
   historyApiFallback: true,
@@ -29,9 +35,9 @@ const devServer = new WebpackDevServer(compiler, {
   },
 });
 
-devServer.listen(hotRailsPort, 'localhost', (err) => {
+devServer.listen(hotReloadingPort, hotReloadingHostname, (err) => {
   if (err) console.error(err);
   console.log(
-    `=> 🔥  Webpack development server is running on port ${hotRailsPort}`,
+    `=> 🔥  Webpack development server is running on ${hotReloadingUrl}`,
   );
 });
diff --git a/client/webpack.client.base.config.js b/client/webpack.client.base.config.js
@@ -3,19 +3,25 @@
 
 // Common client-side webpack configuration used by webpack.hot.config and webpack.rails.config.
 const webpack = require('webpack');
-const path = require('path');
+const ManifestPlugin = require('webpack-manifest-plugin');
+const { resolve } = require('path');
+const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
+
+const configPath = resolve('..', 'config');
+const { manifest } = webpackConfigLoader(configPath);
 
 const devBuild = process.env.NODE_ENV !== 'production';
-const nodeEnv = devBuild ? 'development' : 'production';
 
 module.exports = {
 
   // the project dir
-  context: __dirname,
+  context: resolve(__dirname),
   entry: {
+    // This will contain the app entry points defined by
+    // webpack.client.rails.hot.config and webpack.client.rails.build.config
 
     // See use of 'vendor' in the CommonsChunkPlugin inclusion below.
-    vendor: [
+    'vendor-bundle': [
       'babel-polyfill',
       'es5-shim/es5-shim',
       'es5-shim/es5-sham',
@@ -25,56 +31,62 @@ module.exports = {
       // Below libraries are listed as entry points to be sure they get included in the
       // vendor-bundle.js. Note, if we added some library here, but don't use it in the
       // app-bundle.js, then we just wasted a bunch of space.
-      'axios',
-      'actioncable',
-      'classnames',
-      'immutable',
-      'lodash',
-      'marked',
-      'react-bootstrap',
-      'react-dom',
-      'react-redux',
-      'react-on-rails',
-      'react-router-redux',
-      'redux-thunk',
-      'react-intl',
+      // 'axios',
+      // 'actioncable',
+      // 'classnames',
+      // 'immutable',
+      // 'lodash',
+      // 'marked',
+      // 'react-bootstrap',
+      // 'react-dom',
+      // 'react-redux',
+      // 'react-on-rails',
+      // 'react-router-redux',
+      // 'redux-thunk',
+      // 'react-intl',
     ],
 
     // This will contain the app entry points defined by webpack.hot.config and webpack.rails.config
-    app: [
+    'app-bundle': [
       './app/bundles/comments/startup/clientRegistration',
     ],
   },
+
   resolve: {
     extensions: ['.js', '.jsx'],
     alias: {
-      libs: path.resolve(__dirname, 'app/libs'),
-      react: path.resolve(__dirname, 'node_modules/react'),
-      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+      libs: resolve(__dirname, 'app/libs'),
     },
+    modules: [
+      'client/app',
+      'client/node_modules',
+    ],
   },
 
   plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify(nodeEnv),
-      },
+    new webpack.EnvironmentPlugin({
+      NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
+      DEBUG: false,
       TRACE_TURBOLINKS: devBuild,
     }),
 
     // https://webpack.github.io/docs/list-of-plugins.html#2-explicit-vendor-chunk
     new webpack.optimize.CommonsChunkPlugin({
 
-      // This name 'vendor' ties into the entry definition
-      name: 'vendor',
+      // This name 'vendor-bundle' ties into the entry definition
+      name: 'vendor-bundle',
 
       // We don't want the default vendor.js name
-      filename: 'vendor-bundle.js',
-
-      // Passing Infinity just creates the commons chunk, but moves no modules into it.
-      // In other words, we only put what's in the vendor entry definition in vendor-bundle.js
-      minChunks: Infinity,
+      filename: 'vendor-bundle-[hash].js',
 
+      minChunks(module) {
+        // this assumes your vendor imports exist in the node_modules directory
+        return module.context && module.context.indexOf('node_modules') !== -1;
+      },
+    }),
+    new ManifestPlugin({
+      fileName: manifest,
+      writeToFileEmit: true
     }),
   ],
 
@@ -89,6 +101,7 @@ module.exports = {
         use: {
           loader: 'url-loader',
           options: {
+            name: '[name]-[hash].[ext]',
             limit: 10000,
           },
         },

diff --git a/client/webpack.client.express.config.js b/client/webpack.client.express.config.js
@@ -25,7 +25,7 @@ config.entry.app.push(
 config.output = {
 
   // this file is served directly by webpack
-  filename: '[name]-bundle.js',
+  filename: '[name].js',
   path: __dirname,
 };
 config.plugins.unshift(