configure webpack publicPath dynamically to account for CDN or relative path settings

app/assets/javascripts/webpack.js

@@ -1,13 +1,9 @@
 /**
  * This is the first script loaded by webpack's runtime. It is used to manually configure
- * config.output.publicPath to account for relative_url_root settings which cannot be baked-in
- * to our webpack bundles.
+ * config.output.publicPath to account for relative_url_root or CDN settings which cannot be
+ * baked-in to our webpack bundles.
  */
 
-if (gon && gon.relative_url_root) {
-  // this assumes config.output.publicPath is an absolute path
-  const basePath = gon.relative_url_root.replace(/\/$/, '');
-
-  // eslint-disable-next-line camelcase, no-undef
-  __webpack_public_path__ = basePath + __webpack_public_path__;
+if (gon && gon.webpack_public_path) {
+  __webpack_public_path__ = gon.webpack_public_path; // eslint-disable-line
 }

app/helpers/webpack_helper.rb

@@ -11,20 +11,29 @@ module WebpackHelper
 
     paths = Webpack::Rails::Manifest.asset_paths(source)
     if extension
-      paths = paths.select { |p| p.ends_with? ".#{extension}" }
+      paths.select! { |p| p.ends_with? ".#{extension}" }
     end
 
-    # include full webpack-dev-server url for rspec tests running locally
-    if Rails.env.test? && Rails.configuration.webpack.dev_server.enabled
-      host = Rails.configuration.webpack.dev_server.host
-      port = Rails.configuration.webpack.dev_server.port
-      protocol = Rails.configuration.webpack.dev_server.https ? 'https' : 'http'
-
-      paths.map! do |p|
-        "#{protocol}://#{host}:#{port}#{p}"
-      end
+    force_host = webpack_public_host
+    if force_host
+      paths.map! { |p| "#{force_host}#{p}" }
     end
 
     paths
   end
+
+  def webpack_public_host
+    if Rails.env.test? && Rails.configuration.webpack.dev_server.enabled
+      host = Rails.configuration.webpack.dev_server.host
+      port = Rails.configuration.webpack.dev_server.port
+      protocol = Rails.configuration.webpack.dev_server.https ? 'https' : 'http'
+      "#{protocol}://#{host}:#{port}"
+    else
+      ActionController::Base.asset_host.try(:chomp, '/')
+    end
+  end
+
+  def webpack_public_path
+    "#{webpack_public_host}/#{Rails.application.config.webpack.public_path}/"
+  end
 end

lib/gitlab/gon_helper.rb

@@ -2,11 +2,14 @@
 
 module Gitlab
   module GonHelper
+    include WebpackHelper
+
     def add_gon_variables
       gon.api_version            = 'v4'
       gon.default_avatar_url     = URI.join(Gitlab.config.gitlab.url, ActionController::Base.helpers.image_path('no_avatar.png')).to_s
       gon.max_file_size          = current_application_settings.max_attachment_size
       gon.asset_host             = ActionController::Base.asset_host
+      gon.webpack_public_path    = webpack_public_path
       gon.relative_url_root      = Gitlab.config.gitlab.relative_url_root
       gon.shortcuts_path         = help_page_path('shortcuts')
       gon.user_color_scheme      = Gitlab::ColorSchemes.for_user(current_user).css_class