From 90cdd8b9fe179b1b6de10c6e199a49e94d60236c Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Sat, 29 Jul 2017 22:35:52 -1000 Subject: [PATCH] Update to Webpacker from Webpacker Lite * 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" --- CHANGELOG.md | 24 ++++++ Gemfile | 3 +- README.md | 4 +- docs/api/ruby-api-hot-reload-view-helpers.md | 2 +- docs/basics/installation-overview.md | 2 +- .../react_on_rails/base_generator.rb | 11 ++- .../templates/base/base/config/webpacker.yml | 26 ++++++ .../base/base/config/webpacker_lite.yml | 27 ------ .../webpack_assets_status_checker.rb | 4 +- lib/react_on_rails/utils.rb | 22 +++-- spec/dummy/Gemfile | 3 +- spec/dummy/Gemfile.lock | 20 +++-- spec/dummy/client/server-rails-hot.js | 8 +- .../client/webpack.client.rails.hot.config.js | 6 +- .../config/initializers/react_on_rails.rb | 2 +- spec/dummy/config/webpacker.yml | 26 ++++++ spec/dummy/config/webpacker_lite.yml | 27 ------ .../base_generator_examples.rb | 2 +- .../webpack_assets_status_checker_spec.rb | 12 +-- webpackConfigLoader.js | 85 +++++++------------ 20 files changed, 169 insertions(+), 147 deletions(-) create mode 100644 lib/generators/react_on_rails/templates/base/base/config/webpacker.yml delete mode 100644 lib/generators/react_on_rails/templates/base/base/config/webpacker_lite.yml create mode 100644 spec/dummy/config/webpacker.yml delete mode 100644 spec/dummy/config/webpacker_lite.yml diff --git a/CHANGELOG.md b/CHANGELOG.md index 3833a86dd..891e90af5 100644 --- 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 index 367024241..92ff012c3 100644 --- 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 index 151618616..1eeadf0e2 100644 --- 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 index 3b2f55780..592ad2393 100644 --- 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 index 7145a1a57..55287e83d 100644 --- 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 index 0c18068b3..8e0ccab11 100644 --- 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 new file mode 100644 index 000000000..8d142f01e --- /dev/null +++ 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 deleted file mode 100644 index 5fce44fa7..000000000 --- a/lib/generators/react_on_rails/templates/base/base/config/webpacker_lite.yml +++ /dev/null @@ -1,27 +0,0 @@ -# Note: Base output directory of /public is assumed for static files -default: &default - manifest: manifest.json - # Used in your webpack configuration. Must be created in the - # webpack_public_output_dir folder - -development: - <<: *default - # generated files for development, in /public/webpack/development - webpack_public_output_dir: webpack/development - - # Default is localhost:3500 - hot_reloading_host: localhost:3500 - - # Developer note: considering removing this option so it can ONLY be turned by using an ENV value. - # Default is false, ENV 'HOT_RELOAD' will always override - hot_reloading_enabled_by_default: false - -test: - <<: *default - # generated files for tests, in /public/webpack/test - webpack_public_output_dir: webpack/test - -production: - <<: *default - # generated files for tests, in /public/webpack/production - webpack_public_output_dir: webpack/production 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 index 365a13a1c..86ba36a29 100644 --- 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 index b54d3c1c0..09105da07 100644 --- 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_path_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 index 0a4c32fb8..a89991a9f 100644 --- 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 index 83b8bffc5..609896de4 100644 --- a/spec/dummy/Gemfile.lock +++ b/spec/dummy/Gemfile.lock @@ -1,3 +1,13 @@ +GIT + remote: https://github.com/shakacode/webpacker.git + revision: afe9c996b6884fd35d7fc1f3f83078b1df409ff8 + 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 index de7c84bf5..b403a19e1 100644 --- 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 index 1413f0c7c..9bee29dd4 100644 --- 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,7 +27,7 @@ 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' ], }, @@ -35,7 +35,7 @@ module.exports = merge.strategy( 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 index b1db3f5c9..6ac6c36d4 100644 --- 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 new file mode 100644 index 000000000..8d142f01e --- /dev/null +++ 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 deleted file mode 100644 index 5fce44fa7..000000000 --- a/spec/dummy/config/webpacker_lite.yml +++ /dev/null @@ -1,27 +0,0 @@ -# Note: Base output directory of /public is assumed for static files -default: &default - manifest: manifest.json - # Used in your webpack configuration. Must be created in the - # webpack_public_output_dir folder - -development: - <<: *default - # generated files for development, in /public/webpack/development - webpack_public_output_dir: webpack/development - - # Default is localhost:3500 - hot_reloading_host: localhost:3500 - - # Developer note: considering removing this option so it can ONLY be turned by using an ENV value. - # Default is false, ENV 'HOT_RELOAD' will always override - hot_reloading_enabled_by_default: false - -test: - <<: *default - # generated files for tests, in /public/webpack/test - webpack_public_output_dir: webpack/test - -production: - <<: *default - # generated files for tests, in /public/webpack/production - webpack_public_output_dir: webpack/production 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 index 8f04e5e0f..40ff29954 100644 --- 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 index f99380185..af5b5791d 100644 --- 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 @@ -34,9 +34,9 @@ context "when compiled assets with manifest exist and are up-to-date" do let(:fixture_dirname) { "assets_with_manifest_exist" } before do - require "webpacker_lite" - allow(ReactOnRails::Utils).to receive(:using_webpacker_lite?).and_return(true) - allow(WebpackerLite::Manifest).to receive(:exist?).and_return(true) + require "webpacker" + allow(ReactOnRails::Utils).to receive(:using_webpacker?).and_return(true) + allow(Webpacker::Manifest).to receive(:exist?).and_return(true) allow(ReactOnRails::Utils).to receive(:bundle_js_file_path) .with("client-bundle.js") .and_return(File.join(generated_assets_dir, "client-bundle-6bc530d039d96709b68d.js")) @@ -52,9 +52,9 @@ context "when using webpacker and manifest is missing" do let(:fixture_dirname) { "assets_with_missing_manifest" } before do - require "webpacker_lite" - allow(ReactOnRails::Utils).to receive(:using_webpacker_lite?).and_return(true) - allow(WebpackerLite::Manifest).to receive(:exist?).and_return(false) + require "webpacker" + allow(ReactOnRails::Utils).to receive(:using_webpacker?).and_return(true) + allow(Webpacker::Manifest).to receive(:exist?).and_return(false) end specify { expect(checker.stale_generated_webpack_files).to eq(["manifest.json"]) } diff --git a/webpackConfigLoader.js b/webpackConfigLoader.js index 7b4e2a6da..8f45f2b59 100644 --- a/webpackConfigLoader.js +++ b/webpackConfigLoader.js @@ -1,48 +1,30 @@ /** - * Allow defaults for the config/webpacker_lite.yml. Thee values in this file MUST match values - * in README for https://github.com/shakacode/webpacker_lite + * Allow defaults for the config/webpacker.yml. Thee values in this file MUST match values + * in https://github.com/rails/webpacker/blob/master/lib/install/config/webpacker.yml * - * webpack_public_output_dir: 'webpack' - * manifest: 'manifest.json' - * - * hot_reloading_enabled_by_default: false - * hot_reloading_host: localhost:3500 - * - * NOTE: for hot reloading, env.HOT_RELOADING value will override any config value. This env value + * NOTE: for hot reloading, env.WEBPACKER_HMR value will override any config value. This env value * should be set to TRUE to turn this on. */ const { join, resolve } = require('path'); const { safeLoad } = require('js-yaml'); const { readFileSync } = require('fs'); -const DEFAULT_WEBPACK_PUBLIC_OUTPUT_DIR = 'webpack'; -const DEFAULT_MANIFEST = 'manifest.json'; -const DEFAULT_HOT_RELOADING_HOST = 'localhost:3500'; -const HOT_RELOADING_ENABLED_BY_DEFAULT = false; - -function getLocation(href) { - const match = href.match(/^(https?:)\/\/(([^:/?#]*)(?::([0-9]+))?)([/]?[^?#]*)(\?[^#]*|)(#.*|)$/); - - return match && { - href, - protocol: match[1], - host: match[2], - hostname: match[3], - port: match[4], - pathname: match[5], - search: match[6], - hash: match[7], - }; -} +const MANIFEST = 'manifest.json'; +const DEFAULT_PUBLIC_OUTPUT_PATH = 'packs'; +const DEFAULT_DEV_SERVER_HOST = 'localhost'; +const DEFAULT_DEV_SERVER_PORT = '8080'; +const DEFAULT_DEV_SERVER_HTTPS = false; +const DEFAULT_DEV_SERVER_HOT = false; /** - * @param configPath, location where webpacker_lite.yml will be found + * @param configPath, location where webpacker.yml will be found * @returns {{ * devBuild, * hotReloadingEnabled, - * hotReloadingHost, - * hotReloadingPort, - * hotReloadingUrl, + * devServerEnabled, + * devServerHost, + * devServerPort, + * devServerUrl, * manifest, * webpackOutputPath, * webpackPublicOutputDir @@ -53,40 +35,37 @@ const configLoader = (configPath) => { // Some test environments might not have the NODE_ENV set, so we'll have fallbacks. const configEnv = (process.env.NODE_ENV || process.env.RAILS_ENV || 'development'); - const ymlConfigPath = join(configPath, 'webpacker_lite.yml'); + const ymlConfigPath = join(configPath, 'webpacker.yml'); const configuration = safeLoad(readFileSync(ymlConfigPath, 'utf8'))[configEnv]; + const devServerValues = configuration.dev_server; const devBuild = configEnv !== 'production'; - const hotReloadingHost = configuration.hot_reloading_host || DEFAULT_HOT_RELOADING_HOST; + const devServerHost = devServerValues && (devServerValues.host || DEFAULT_DEV_SERVER_HOST); + const devServerPort = devServerValues && (devServerValues.port || DEFAULT_DEV_SERVER_PORT); + const devServerHttps = devServerValues && (devServerValues.https || DEFAULT_DEV_SERVER_HTTPS); + const devServerHot = devServerValues && (devServerValues.https || DEFAULT_DEV_SERVER_HOT); // NOTE: Rails path is hard coded to `/public` - const webpackPublicOutputDir = configuration.webpack_public_output_dir || - DEFAULT_WEBPACK_PUBLIC_OUTPUT_DIR; + const webpackPublicOutputDir = configuration.public_output_path || + DEFAULT_PUBLIC_OUTPUT_PATH; const webpackOutputPath = resolve(configPath, '..', 'public', webpackPublicOutputDir); - const manifest = configuration.manifest || DEFAULT_MANIFEST; - - const hotReloadingEnabled = (env.HOT_RELOADING === 'TRUE' || env.HOT_RELOADING === 'YES' || - configuration.hot_reloading_enabled_by_default || HOT_RELOADING_ENABLED_BY_DEFAULT); + const manifest = MANIFEST; - const hotReloadingUrl = hotReloadingHost.match(/^http/) - ? hotReloadingHost - : `http://${hotReloadingHost}`; + const devServerEnabled = !!devServerValues; + const hotReloadingEnabled = !!devServerHot || env.WEBPACKER_HMR === 'TRUE'; - const url = getLocation(hotReloadingUrl); - const hotReloadingPort = url.port; - const hotReloadingHostname = url.hostname; - if (hotReloadingPort === '' || hotReloadingHostname === '') { - const msg = 'Missing port number. Please specify the `hot_reloading_host` like `localhost:3500`'; - throw new Error(msg); + let devServerUrl = null; + if (devServerValues) { + devServerUrl = `http${devServerHttps ? 's' : ''}://${devServerHost}:${devServerPort}`; } return { devBuild, hotReloadingEnabled, - hotReloadingHost, - hotReloadingHostname, - hotReloadingPort, - hotReloadingUrl, + devServerEnabled, + devServerHost, + devServerPort, + devServerUrl, manifest, webpackOutputPath, webpackPublicOutputDir,