Update to Webpacker from Webpacker Lite

justin808 · justin808 · commit 36d7047af2f4 · 2017-07-30T22:53:14.000-10:00
* Uses branch on github for now for Webpacker * gem "webpacker", git: "https://github.com/shakacode/webpacker.git", branch: "issue-464-merge-webpacker-lite-into-webpacker"
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,30 @@ Changes since last non-beta release.
 
 *Please add entries here for your pull requests.*
 
+### [9.0.0.beta.1]
+- Switch over to using Webpacker
+
+- If using the WebpackConfigLoader, you will need to rename the following object properties:
+  - hotReloadingUrl       devServerUrl         
+  - hotReloadingHostname  devServerHost        
+  - hotReloadingPort      devServerPort
+
+- Find your webpacker_lite.yml and rename it to webpacker.yml
+  - Add a section like this under your development env:
+    ```
+    dev_server:
+      host: localhost
+      port: 8080
+      https: false
+      # Can be enabled by export WEBPACKER_HMR=TRUE in env
+      hot: false   
+    ```
+  - remove `hot_reloading_host` and `hot_reloading_enabled_by_default`
+  - rename `webpack_public_output_dir` to `public_output_path`
+
+  
+
+
 ### [8.0.6]
 #### fixed
 - Fixes server rendering when using a CDN. Server rendering would try to fetch a file with the "asset_host". This change updates the webpacker_lite dependency to 2.1.0 which has a new helper `pack_path`. [#901](https://github.com/shakacode/react_on_rails/pull/901) by [justin808](https://github.com/justin808). Be sure to update webpacker_lite to 2.1.0.
diff --git a/Gemfile b/Gemfile
@@ -38,6 +38,7 @@ gem "chromedriver-helper"
 gem "launchy"
 gem "poltergeist"
 gem "selenium-webdriver"
-gem "webpacker_lite", "~> 2.1"
+gem "webpacker", git: "https://github.com/shakacode/webpacker.git",
+                 branch: "issue-464-merge-webpacker-lite-into-webpacker"
 
 gem "rainbow"
diff --git a/README.md b/README.md
@@ -74,7 +74,7 @@ For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
 
 # NEWS
 * **[VERSION 8.1.0](https://rubygems.org/gems/react_on_rails/)** shipped with [webpacker_lite](https://github.com/shakacode/webpacker_lite) (soon [**webpacker**](https://github.com/rails/webpacker/issues/464#issuecomment-310986140) support! [react-webpack-rails-tutorial PR #395](https://github.com/shakacode/react-webpack-rails-tutorial/pull/395) shows the changes needed to migrate from the Asset Pipeline to Webpacker Lite. For more information, see my article: [Webpacker Lite: Why Fork Webpacker?](https://blog.shakacode.com/webpacker-lite-why-fork-webpacker-f0a7707fac92). Per recent discussions, we [will merge Webpacker Lite changes back into Webpacker](https://github.com/rails/webpacker/issues/464#issuecomment-310986140). There's no reason to wait for this. The upgrade will eventually be trivial.
-* The Docs here on `master` refer to 8.1.0 including support for [webpacker_lite](https://github.com/shakacode/webpacker_lite)!
+* The Docs here on `master` refer to 9.0.0 including support for [webpacker](https://github.com/shakacode/webpacker)!
 *Use the [7.0.4 docs](https://github.com/shakacode/react_on_rails/tree/7.0.4) to refer to the older asset pipeline way.*
 * *See [NEWS.md](NEWS.md) for more notes over time.*
 
@@ -124,7 +124,7 @@ See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpac
 
 ## Why Webpack?
 
-Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [webpacker_lite](https://github.com/shakacode/webpacker_lite) provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly processing your Webpack output via the Webpack config files.
+Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [webpacker](https://github.com/rails/webpacker) provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly processing your Webpack output via the Webpack config files.
 
 This usage of webpack fits neatly and simply into existing Rails apps. You can include React components on a Rails view with a simple helper.
 
diff --git a/docs/api/ruby-api-hot-reload-view-helpers.md b/docs/api/ruby-api-hot-reload-view-helpers.md
@@ -1,4 +1,4 @@
-## NOTE: These helpers are NOT needed if using webpacker_lite
+## NOTE: These helpers are NOT needed if using webpacker
 
 ## Hot Reloading View Helpers
 The `env_javascript_include_tag` and `env_stylesheet_link_tag` support the usage of a webpack dev server for providing the JS and CSS assets during development mode. See the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/) for a working example.
diff --git a/docs/basics/installation-overview.md b/docs/basics/installation-overview.md
@@ -23,7 +23,7 @@ The default path: `public/webpack` can be loaded with webpackConfigLoader as sho
 1. You create scripts in `client/package.json` per the example apps. These are used for building your Webpack assets. Also do this for your top level `package.json`.
 
 ## Rails Steps (outside of /client)
-1. Add  `gem "webpacker_lite"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](../../spec/dummy/app/views/layouts/application.html.erb)
+1. Add  `gem "webpacker"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](../../spec/dummy/app/views/layouts/application.html.erb)
 1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [spec/dummy/config/initializers/react_on_rails.rb](../../spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
 1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
 1. Configure your top level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files. For more information on hot reloading, see [Hot Reloading of Assets For Rails Development](../additional-reading/hot-reloading-rails-development.md)
diff --git a/lib/generators/react_on_rails/base_generator.rb b/lib/generators/react_on_rails/base_generator.rb
@@ -47,7 +47,7 @@ def create_react_directories
       def copy_base_files
         base_path = "base/base/"
         base_files = %w[app/controllers/hello_world_controller.rb
-                        config/webpacker_lite.yml
+                        config/webpacker.yml
                         client/.babelrc
                         client/webpack.config.js
                         client/REACT_ON_RAILS_CLIENT_README.md]
@@ -71,7 +71,14 @@ def template_package_json
       end
 
       def add_base_gems_to_gemfile
-        append_to_file("Gemfile", "\ngem 'mini_racer', platforms: :ruby\ngem 'webpacker_lite'\n")
+        gems = <<-GEMS.strip_heredoc
+
+        gem 'mini_racer', platforms: :ruby
+        gem 'webpacker', git: "https://github.com/shakacode/webpacker.git",
+                         branch: "issue-464-merge-webpacker-lite-into-webpacker"
+        GEMS
+        append_to_file("Gemfile",
+                       gems)
       end
 
       def append_to_spec_rails_helper
diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpacker.yml b/lib/generators/react_on_rails/templates/base/base/config/webpacker.yml
@@ -0,0 +1,26 @@
+# Note: Base output directory of /public is assumed for static files
+default: &default
+  # Critical to set compile as false for React on Rails projects
+  compile: false
+
+development:
+  <<: *default
+  # generated files for development, in /public/webpack/development
+  public_output_path: webpack/development
+
+  dev_server:
+    host: localhost
+    port: 8080
+    https: false
+    # Can be enabled by export WEBPACKER_HMR=TRUE in env
+    hot: false
+
+test:
+  <<: *default
+  # generated files for tests, in /public/webpack/test
+  public_output_path: webpack/test
+
+production:
+  <<: *default
+  # generated files for tests, in /public/webpack/production
+  public_output_path: webpack/production
diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpacker_lite.yml b/lib/generators/react_on_rails/templates/base/base/config/webpacker_lite.yml
diff --git a/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb b/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb
@@ -24,8 +24,8 @@ def initialize(
       end
 
       def stale_generated_webpack_files
-        manifest_needed = ReactOnRails::Utils.using_webpacker_lite? &&
-                          !WebpackerLite::Manifest.exist?
+        manifest_needed = ReactOnRails::Utils.using_webpacker? &&
+                          !Webpacker::Manifest.exist?
 
         return ["manifest.json"] if manifest_needed
 
diff --git a/lib/react_on_rails/utils.rb b/lib/react_on_rails/utils.rb
@@ -62,25 +62,31 @@ def self.invoke_and_exit_if_failed(cmd, failure_message)
     end
 
     def self.server_bundle_js_file_path
+      # Don't ever use the hashed file name?
+      # Cases:
+      # 1. Using same bundle for both server and client, so server bundle will be hashed
+      # 2. Using a different bundle (different Webpack config), so file is not hashed
       bundle_js_file_path(ReactOnRails.configuration.server_bundle_js_file)
     end
 
-    # TODO: conturbo Write Test for this, with BOTH webpacker_lite installed and not, and
-    # with case for webpacker_lite, but server file is not in the file
+    # TODO: conturbo Write Test for this, with BOTH webpacker installed and not, and
+    # with case for webpacker, but server file is not in the file
     def self.bundle_js_file_path(bundle_name)
       # For testing outside of Rails app
 
-      if using_webpacker_lite? && WebpackerLite::Manifest.lookup(bundle_name)
-        # If using webpacker_lite gem
-        # Per https://github.com/rails/webpacker/issues/571, this path might
-        public_subdir_hashed_file_name = ActionController::Base.helpers.pack_path(bundle_name)
-        return File.join("public", public_subdir_hashed_file_name)
+      if using_webpacker?
+        # Note, server bundle should not be in the manifest
+        # If using webpacker gem
+        # Per https://github.com/rails/webpacker/issues/571
+        path = Webpacker::Manifest.lookup_no_throw(bundle_name)
+        return path if path.present?
+        # Else either the file is not in the manifest, so we'll default to the non-hashed name.
       end
 
       File.join(ReactOnRails.configuration.generated_assets_dir, bundle_name)
     end
 
-    def self.using_webpacker_lite?
+    def self.using_webpacker?
       ActionController::Base.helpers.respond_to?(:asset_pack_path)
     end
 
diff --git a/spec/dummy/Gemfile b/spec/dummy/Gemfile
@@ -41,7 +41,8 @@ gem "sdoc", group: :doc
 
 gem "react_on_rails", path: "../.."
 
-gem "webpacker_lite", "2.1.0"
+gem "webpacker", git: "https://github.com/shakacode/webpacker.git",
+                 branch: "issue-464-merge-webpacker-lite-into-webpacker"
 
 gem "mini_racer"
 
diff --git a/spec/dummy/Gemfile.lock b/spec/dummy/Gemfile.lock
@@ -1,3 +1,13 @@
+GIT
+  remote: https://github.com/shakacode/webpacker.git
+  revision: e782dc3268ab713dcbd3688000542e5a50c2d26e
+  branch: issue-464-merge-webpacker-lite-into-webpacker
+  specs:
+    webpacker (2.0)
+      activesupport (>= 4.2)
+      multi_json (~> 1.2)
+      railties (>= 4.2)
+
 PATH
   remote: ../..
   specs:
@@ -102,7 +112,7 @@ GEM
       railties (>= 3.0.0)
     globalid (0.4.0)
       activesupport (>= 4.2.0)
-    i18n (0.8.4)
+    i18n (0.8.6)
     interception (0.5)
     io-like (0.3.0)
     jbuilder (2.6.4)
@@ -131,7 +141,7 @@ GEM
     mini_portile2 (2.2.0)
     mini_racer (0.1.9)
       libv8 (~> 5.3)
-    minitest (5.10.2)
+    minitest (5.10.3)
     multi_json (1.12.1)
     nio4r (2.1.0)
     nokogiri (1.8.0)
@@ -276,10 +286,6 @@ GEM
     uglifier (3.2.0)
       execjs (>= 0.3.0, < 3)
     unicode-display_width (1.2.1)
-    webpacker_lite (2.1.0)
-      activesupport (>= 4.2)
-      multi_json (~> 1.2)
-      railties (>= 4.2)
     websocket (1.2.4)
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
@@ -326,7 +332,7 @@ DEPENDENCIES
   sqlite3
   turbolinks (~> 5.0)
   uglifier
-  webpacker_lite (= 2.1.0)
+  webpacker!
 
 BUNDLED WITH
    1.15.3
diff --git a/spec/dummy/client/server-rails-hot.js b/spec/dummy/client/server-rails-hot.js
@@ -20,13 +20,13 @@ const webpackConfig = require('./webpack.client.rails.hot.config');
 
 const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
 const configPath = resolve('..', 'config');
-const { hotReloadingUrl, hotReloadingPort, hotReloadingHostname } = webpackConfigLoader(configPath);
+const { devServerUrl, devServerPort, devServerHostname } = webpackConfigLoader(configPath);
 
 const compiler = webpack(webpackConfig);
 
 const devServer = new WebpackDevServer(compiler, {
   proxy: {
-    '*': hotReloadingUrl,
+    '*': devServerUrl,
   },
   headers: {
     'Access-Control-Allow-Origin': '*',
@@ -48,9 +48,9 @@ const devServer = new WebpackDevServer(compiler, {
   },
 });
 
-devServer.listen(hotReloadingPort, hotReloadingHostname, err => {
+devServer.listen(devServerPort, devServerHostname, err => {
   if (err) console.error(err);
   console.log(
-    `=> 🔥  Webpack development server is running on ${hotReloadingUrl}`
+    `=> 🔥  Webpack development server is running on ${devServerUrl}`
   );
 });
diff --git a/spec/dummy/client/webpack.client.rails.hot.config.js b/spec/dummy/client/webpack.client.rails.hot.config.js
@@ -12,7 +12,7 @@ const merge = require('webpack-merge');
 const config = require('./webpack.client.base.config');
 const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
 const configPath = resolve('..', 'config');
-const { hotReloadingUrl, webpackOutputPath } = webpackConfigLoader(configPath);
+const { devServerUrl, webpackOutputPath } = webpackConfigLoader(configPath);
 
 // entry is prepended because 'react-hot-loader/patch' must be the very first entry
 // for hot reloading to work.
@@ -27,15 +27,15 @@ module.exports = merge.strategy(
   entry: {
     'app-bundle': [
       'react-hot-loader/patch',
-      `webpack-dev-server/client?${hotReloadingUrl}`,
+      `webpack-dev-server/client?${devServerUrl}`,
       'webpack/hot/only-dev-server'
     ],
   },
 
   output: {
     filename: '[name].js',
     path: webpackOutputPath,
-    publicPath: `${hotReloadingUrl}/`,
+    publicPath: `${devServerUrl}/`,
   },
 
   module: {
diff --git a/spec/dummy/config/initializers/react_on_rails.rb b/spec/dummy/config/initializers/react_on_rails.rb
@@ -20,7 +20,7 @@ def self.custom_context(view_context)
   config.generated_assets_dir = File.join(%w[public webpack], Rails.env)
 
   # Define the files we need to check for webpack compilation when running tests.
-  config.webpack_generated_files = %w[app-bundle.js vendor-bundle.js server-bundle.js]
+  config.webpack_generated_files = %w[manifest.json]
 
   # This is the file used for server rendering of React when using `(prerender: true)`
   # If you are never using server rendering, you may set this to "".
diff --git a/spec/dummy/config/webpacker.yml b/spec/dummy/config/webpacker.yml
@@ -0,0 +1,26 @@
+# Note: Base output directory of /public is assumed for static files
+default: &default
+  # Critical to set compile as false for React on Rails projects
+  compile: false
+
+development:
+  <<: *default
+  # generated files for development, in /public/webpack/development
+  public_output_path: webpack/development
+
+  dev_server:
+    host: localhost
+    port: 8080
+    https: false
+    # Can be enabled by export WEBPACKER_HMR=TRUE in env
+    hot: false
+
+test:
+  <<: *default
+  # generated files for tests, in /public/webpack/test
+  public_output_path: webpack/test
+
+production:
+  <<: *default
+  # generated files for tests, in /public/webpack/production
+  public_output_path: webpack/production
diff --git a/spec/dummy/config/webpacker_lite.yml b/spec/dummy/config/webpacker_lite.yml
diff --git a/spec/react_on_rails/support/shared_examples/base_generator_examples.rb b/spec/react_on_rails/support/shared_examples/base_generator_examples.rb
@@ -36,7 +36,7 @@
        client/.babelrc
        client/package.json
        config/initializers/react_on_rails.rb
-       config/webpacker_lite.yml
+       config/webpacker.yml
        package.json
        Procfile.dev].each { |file| assert_file(file) }
   end
diff --git a/spec/react_on_rails/test_helper/webpack_assets_status_checker_spec.rb b/spec/react_on_rails/test_helper/webpack_assets_status_checker_spec.rb
diff --git a/webpackConfigLoader.js b/webpackConfigLoader.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-## NOTE: These helpers are NOT needed if using webpacker_lite`
	`1`	`+## NOTE: These helpers are NOT needed if using webpacker`
`2`	`2`
`3`	`3`	`## Hot Reloading View Helpers`
`4`	`4`	The `env_javascript_include_tag` and `env_stylesheet_link_tag` support the usage of a webpack dev server for providing the JS and CSS assets during development mode. See the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/) for a working example.