adjust IDE page loading config to ensure web workers are not loaded cross-origin

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({
@@ -26,8 +28,9 @@ function initIde(el) {
   });
 }
 
-const ideElement = document.getElementById('ide');
-
-Vue.use(Translate);
-
-initIde(ideElement);
+export function resetServiceWorkersPublicPath() {
+  // tell webpack to load assets from origin so that web workers don't break
+  const relativeRootPath = (gon && gon.relative_url_root) || '';
+  const webpackAssetPath = `${relativeRootPath}/assets/webpack/`;
+  __webpack_public_path__ = webpackAssetPath; // eslint-disable-line camelcase
+}

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);
+  }
+});

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') } }

config/webpack.config.js

@@ -57,7 +57,6 @@ function generateEntries() {
   const manualEntries = {
     default: defaultEntries,
     raven: './raven/index.js',
-    ide: './ide/index.js',
   };
 
   return Object.assign(manualEntries, autoEntries);
@@ -75,6 +74,7 @@ const config = {
     publicPath: '/assets/webpack/',
     filename: IS_PRODUCTION ? '[name].[chunkhash].bundle.js' : '[name].bundle.js',
     chunkFilename: IS_PRODUCTION ? '[name].[chunkhash].chunk.js' : '[name].chunk.js',
+    globalObject: 'this', // allow HMR and web workers to play nice
   },
 
   optimization: {
@@ -129,15 +129,7 @@ const config = {
       },
       {
         test: /\_worker\.js$/,
-        use: [
-          {
-            loader: 'worker-loader',
-            options: {
-              inline: true,
-            },
-          },
-          { loader: 'babel-loader' },
-        ],
+        use: ['worker-loader', 'babel-loader'],
       },
       {
         test: /\.(worker(\.min)?\.js|pdf|bmpr)$/,