Merge branch 'upgrade-to-webpack-v4' into 'master'

Upgrade to Webpack 4

Closes #43400

See merge request gitlab-org/gitlab-ce!17218

6 files changed, 85 insertions, 54 deletions

diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index e5c47d09886..c5835cd3b06 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -4,7 +4,9 @@ import ide from './components/ide.vue';
 import store from './stores';
 import router from './ide_router';
 
-function initIde(el) {
+Vue.use(Translate);
+
+export function initIde(el) {
   if (!el) return null;
 
   return new Vue({
@@ -27,8 +29,12 @@ function initIde(el) {
   });
 }
 
-const ideElement = document.getElementById('ide');
-
-Vue.use(Translate);
-
-initIde(ideElement);
+// tell webpack to load assets from origin so that web workers don't break
+export function resetServiceWorkersPublicPath() {
+  // __webpack_public_path__ is a global variable that can be used to adjust
+  // the webpack publicPath setting at runtime.
+  // see: https://webpack.js.org/guides/public-path/
+  const relativeRootPath = (gon && gon.relative_url_root) || '';
+  const webpackAssetPath = `${relativeRootPath}/assets/webpack/`;
+  __webpack_public_path__ = webpackAssetPath; // eslint-disable-line camelcase
+}
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 2c80baba10b..247aeb481c6 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -1,22 +1,19 @@
-/* eslint-disable import/first */
 /* global $ */
 
 import jQuery from 'jquery';
 import Cookies from 'js-cookie';
 import svg4everybody from 'svg4everybody';
 
-// expose common libraries as globals (TODO: remove these)
-window.jQuery = jQuery;
-window.$ = jQuery;
+// bootstrap webpack, common libs, polyfills, and behaviors
+import './webpack';
+import './commons';
+import './behaviors';
 
 // lib/utils
 import { handleLocationHash, addSelectOnFocusBehaviour } from './lib/utils/common_utils';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import { getLocationHash, visitUrl } from './lib/utils/url_utility';
 
-// behaviors
-import './behaviors/';
-
 // everything else
 import loadAwardsHandler from './awards_handler';
 import bp from './breakpoints';
@@ -31,9 +28,12 @@ import initLogoAnimation from './logo';
 import './milestone_select';
 import './projects_dropdown';
 import initBreadcrumbs from './breadcrumb';
-
 import initDispatcher from './dispatcher';
 
+// expose jQuery as global (TODO: remove these)
+window.jQuery = jQuery;
+window.$ = jQuery;
+
 // inject test utilities if necessary
 if (process.env.NODE_ENV !== 'production' && gon && gon.test_env) {
   $.fx.off = true;
@@ -52,10 +52,14 @@ document.addEventListener('beforeunload', () => {
 });
 
 window.addEventListener('hashchange', handleLocationHash);
-window.addEventListener('load', function onLoad() {
-  window.removeEventListener('load', onLoad, false);
-  handleLocationHash();
-}, false);
+window.addEventListener(
+  'load',
+  function onLoad() {
+    window.removeEventListener('load', onLoad, false);
+    handleLocationHash();
+  },
+  false,
+);
 
 gl.lazyLoader = new LazyLoader({
   scrollContainer: window,
@@ -89,9 +93,7 @@ document.addEventListener('DOMContentLoaded', () => {
   if (bootstrapBreakpoint === 'xs') {
     const $rightSidebar = $('aside.right-sidebar, .layout-page');
 
-    $rightSidebar
-      .removeClass('right-sidebar-expanded')
-      .addClass('right-sidebar-collapsed');
+    $rightSidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
   }
 
   // prevent default action for disabled buttons
@@ -108,7 +110,8 @@ document.addEventListener('DOMContentLoaded', () => {
   addSelectOnFocusBehaviour('.js-select-on-focus');
 
   $('.remove-row').on('ajax:success', function removeRowAjaxSuccessCallback() {
-    $(this).tooltip('destroy')
+    $(this)
+      .tooltip('destroy')
       .closest('li')
       .fadeOut();
   });
@@ -118,7 +121,9 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   $('.js-remove-tr').on('ajax:success', function removeTRAjaxSuccessCallback() {
-    $(this).closest('tr').fadeOut();
+    $(this)
+      .closest('tr')
+      .fadeOut();
   });
 
   // Initialize select2 selects
@@ -155,7 +160,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Form submitter
   $('.trigger-submit').on('change', function triggerSubmitCallback() {
-    $(this).parents('form').submit();
+    $(this)
+      .parents('form')
+      .submit();
   });
 
   localTimeAgo($('abbr.timeago, .js-timeago'), true);
@@ -204,9 +211,15 @@ document.addEventListener('DOMContentLoaded', () => {
     $this.toggleClass('active');
 
     if ($this.hasClass('active')) {
-      notesHolders.show().find('.hide, .content').show();
+      notesHolders
+        .show()
+        .find('.hide, .content')
+        .show();
     } else {
-      notesHolders.hide().find('.content').hide();
+      notesHolders
+        .hide()
+        .find('.content')
+        .hide();
     }
 
     $(document).trigger('toggle.comments');
@@ -247,9 +260,11 @@ document.addEventListener('DOMContentLoaded', () => {
   const flashContainer = document.querySelector('.flash-container');
 
   if (flashContainer && flashContainer.children.length) {
-    flashContainer.querySelectorAll('.flash-alert, .flash-notice, .flash-success').forEach((flashEl) => {
-      removeFlashClickListener(flashEl);
-    });
+    flashContainer
+      .querySelectorAll('.flash-alert, .flash-notice, .flash-success')
+      .forEach(flashEl => {
+        removeFlashClickListener(flashEl);
+      });
   }
 
   initDispatcher();
diff --git a/app/assets/javascripts/pages/ide/index.js b/app/assets/javascripts/pages/ide/index.js
new file mode 100644
index 00000000000..efadf6967aa
--- /dev/null
+++ b/app/assets/javascripts/pages/ide/index.js
@@ -0,0 +1,9 @@
+import { initIde, resetServiceWorkersPublicPath } from '~/ide/index';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const ideElement = document.getElementById('ide');
+  if (ideElement) {
+    resetServiceWorkersPublicPath();
+    initIde(ideElement);
+  }
+});
diff --git a/app/helpers/webpack_helper.rb b/app/helpers/webpack_helper.rb
index 8bcced70d63..e12e4ba70e9 100644
--- a/app/helpers/webpack_helper.rb
+++ b/app/helpers/webpack_helper.rb
@@ -1,12 +1,12 @@
-require 'webpack/rails/manifest'
+require 'gitlab/webpack/manifest'
 
 module WebpackHelper
-  def webpack_bundle_tag(bundle, force_same_domain: false)
-    javascript_include_tag(*gitlab_webpack_asset_paths(bundle, force_same_domain: force_same_domain))
+  def webpack_bundle_tag(bundle)
+    javascript_include_tag(*webpack_entrypoint_paths(bundle))
   end
 
   def webpack_controller_bundle_tags
-    bundles = []
+    chunks = []
 
     action = case controller.action_name
              when 'create' then 'new'
@@ -16,37 +16,44 @@ module WebpackHelper
 
     route = [*controller.controller_path.split('/'), action].compact
 
-    until route.empty?
+    until chunks.any? || route.empty?
+      entrypoint = "pages.#{route.join('.')}"
       begin
-        asset_paths = gitlab_webpack_asset_paths("pages.#{route.join('.')}", extension: 'js')
-        bundles.unshift(*asset_paths)
-      rescue Webpack::Rails::Manifest::EntryPointMissingError
+        chunks = webpack_entrypoint_paths(entrypoint, extension: 'js')
+      rescue Gitlab::Webpack::Manifest::AssetMissingError
         # no bundle exists for this path
       end
-
       route.pop
     end
 
-    javascript_include_tag(*bundles)
+    if chunks.empty?
+      chunks = webpack_entrypoint_paths("default", extension: 'js')
+    end
+
+    javascript_include_tag(*chunks)
   end
 
-  # override webpack-rails gem helper until changes can make it upstream
-  def gitlab_webpack_asset_paths(source, extension: nil, force_same_domain: false)
+  def webpack_entrypoint_paths(source, extension: nil, exclude_duplicates: true)
     return "" unless source.present?
 
-    paths = Webpack::Rails::Manifest.asset_paths(source)
+    paths = Gitlab::Webpack::Manifest.entrypoint_paths(source)
     if extension
       paths.select! { |p| p.ends_with? ".#{extension}" }
     end
 
-    unless force_same_domain
-      force_host = webpack_public_host
-      if force_host
-        paths.map! { |p| "#{force_host}#{p}" }
-      end
+    force_host = webpack_public_host
+    if force_host
+      paths.map! { |p| "#{force_host}#{p}" }
     end
 
-    paths
+    if exclude_duplicates
+      @used_paths ||= []
+      new_paths = paths - @used_paths
+      @used_paths += new_paths
+      new_paths
+    else
+      paths
+    end
   end
 
   def webpack_public_host
diff --git a/app/views/ide/index.html.haml b/app/views/ide/index.html.haml
index e0e8fe548d0..da9331b45dd 100644
--- a/app/views/ide/index.html.haml
+++ b/app/views/ide/index.html.haml
@@ -1,9 +1,6 @@
 - @body_class = 'ide'
 - page_title 'IDE'
 
-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag 'ide', force_same_domain: true
-
 #ide.ide-loading{ data: {"empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg'),
   "no-changes-state-svg-path" => image_path('illustrations/multi-editor_no_changes_empty.svg'),
   "committed-state-svg-path" => image_path('illustrations/multi-editor_all_changes_committed_empty.svg') } }
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index b981b5fdafa..02bdfe9aa3c 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -38,9 +38,6 @@
     = yield :library_javascripts
 
   = javascript_include_tag locale_path unless I18n.locale == :en
-  = webpack_bundle_tag "webpack_runtime"
-  = webpack_bundle_tag "common"
-  = webpack_bundle_tag "main"
   = webpack_bundle_tag "raven" if Gitlab::CurrentSettings.clientside_sentry_enabled
 
   - if content_for?(:page_specific_javascripts)