Add webpack_assets_path_tag to apply application asset host to dynamic/lazy chunk source path

docs/deployment.md

@@ -103,6 +103,8 @@ Now, you can set `brotli_static on;` in your nginx site config, as per the confi
 Webpacker out-of-the-box provides CDN support using your Rails app `config.action_controller.asset_host` setting. If you already have [CDN](http://guides.rubyonrails.org/asset_pipeline.html#cdns) added in your Rails app
 you don't need to do anything extra for Webpacker, it just works.
 
+Note: If you rely on dynamic/lazy chunk loading, you should either compile packs with static `WEBPACKER_ASSET_HOST` or use `webpack_assets_path_tag` to override chunk loading source in runtime.
+
 ## Capistrano
 
 ### Assets compiling on every deployment even if JavaScript and CSS files are not changed

lib/webpacker/helper.rb

@@ -163,6 +163,23 @@ def stylesheet_packs_with_chunks_tag(*names, **options)
     end
   end
 
+  # Overrides Webpack public path in runtime to apply application asset host.
+  # That forces Webpack to take into account application asset host for dynamic/lazy chunk loading without a necessity
+  # to pre-build bundles with static `WEBPACKER_ASSET_HOST`.
+  #
+  # Examples:
+  #
+  #   # Should be used in `head` before any `*_pack*` helpers
+  #   <%= webpack_assets_path_tag %>
+  #
+  #   <%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %>
+  #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %>
+  def webpack_assets_path_tag(html_options = {})
+    path = "#{compute_asset_host}/#{current_webpacker_instance.config.public_output_path.basename}/"
+
+    javascript_tag("__webpack_public_path__ = '#{path}';", html_options)
+  end
+
   private
     def stylesheet?(name)
       File.extname(name) == ".css"

test/helper_test.rb

@@ -11,6 +11,9 @@ def send_early_hints(links) end
       def base_url
         "https://example.com"
       end
+      def protocol
+        "https://"
+      end
     end.new
   end
 
@@ -142,4 +145,36 @@ def test_stylesheet_pack_tag_splat
         %(<link rel="stylesheet" media="all" href="/packs/application-dd6b1cd38bfa093df600.css" />),
       stylesheet_pack_tag("bootstrap.css", "application.css", media: "all")
   end
+
+  def test_webpack_assets_path_tag
+    assert_equal \
+      %(<script>\n) +
+        %(//<![CDATA[\n) +
+        %(__webpack_public_path__ = '/packs/';\n) +
+        %(//]]>\n) +
+        %(</script>),
+      webpack_assets_path_tag
+  end
+
+  def test_webpack_assets_path_tag_with_asset_host
+    config.stub :asset_host, "cdn.example.com" do
+      assert_equal \
+        %(<script>\n) +
+          %(//<![CDATA[\n) +
+          %(__webpack_public_path__ = 'https://cdn.example.com/packs/';\n) +
+          %(//]]>\n) +
+          %(</script>),
+        webpack_assets_path_tag
+    end
+  end
+
+  def test_webpack_assets_path_tag_with_html_options
+    assert_equal \
+      %(<script defer="defer">\n) +
+        %(//<![CDATA[\n) +
+        %(__webpack_public_path__ = '/packs/';\n) +
+        %(//]]>\n) +
+        %(</script>),
+      webpack_assets_path_tag(defer: "defer")
+  end
 end