add monaco-editor-webpack-plugin and update webpack config

app/assets/javascripts/ide/components/repo_editor.vue

 <script>
-/* global monaco */
 import { mapState, mapGetters, mapActions } from 'vuex';
+import * as monaco from 'monaco-editor';
 import flash from '~/flash';
 import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
 import { activityBarViews, viewerTypes } from '../constants';
-import monacoLoader from '../monaco_loader';
 import Editor from '../lib/editor';
 import ExternalLink from './external_link.vue';
 
@@ -87,11 +86,8 @@ export default {
     if (this.editor && monaco) {
       this.initMonaco();
     } else {
-      monacoLoader(['vs/editor/editor.main'], () => {
       this.editor = Editor.create(monaco);
-
       this.initMonaco();
-      });
     }
   },
   methods: {

config/webpack.config.js

@@ -4,8 +4,8 @@ const glob = require('glob');
 const webpack = require('webpack');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const ROOT_PATH = path.resolve(__dirname, '..');
@@ -168,15 +168,7 @@ module.exports = {
           name: '[name].[hash:8].[ext]',
         },
       },
-      {
-        test: /monaco-editor\/\w+\/vs\/loader\.js$/,
-        use: [
-          { loader: 'exports-loader', options: 'l.global' },
-          { loader: 'imports-loader', options: 'l=>{},this=>l,AMDLoader=>this,module=>undefined' },
-        ],
-      },
     ],
-    noParse: [/monaco-editor\/\w+\/vs\//],
   },
 
   optimization: {
@@ -226,6 +218,9 @@ module.exports = {
     // enable vue-loader to use existing loader rules for other module types
     new VueLoaderPlugin(),
 
+    // automatically configure monaco editor web workers
+    new MonacoWebpackPlugin(),
+
     // prevent pikaday from including moment.js
     new webpack.IgnorePlugin(/moment/, /pikaday/),
 
@@ -235,29 +230,6 @@ module.exports = {
       jQuery: 'jquery',
     }),
 
-    // copy pre-compiled vendor libraries verbatim
-    new CopyWebpackPlugin([
-      {
-        from: path.join(
-          ROOT_PATH,
-          `node_modules/monaco-editor/${IS_PRODUCTION ? 'min' : 'dev'}/vs`
-        ),
-        to: 'monaco-editor/vs',
-        transform: function(content, path) {
-          if (/\.js$/.test(path) && !/worker/i.test(path) && !/typescript/i.test(path)) {
-            return (
-              '(function(){\n' +
-              'var define = this.define, require = this.require;\n' +
-              'window.define = define; window.require = require;\n' +
-              content +
-              '\n}.call(window.__monaco_context__ || (window.__monaco_context__ = {})));'
-            );
-          }
-          return content;
-        },
-      },
-    ]),
-
     // compression can require a lot of compute time and is disabled in CI
     IS_PRODUCTION && !NO_COMPRESSION && new CompressionPlugin(),
 

package.json

@@ -65,6 +65,7 @@
     "katex": "^0.8.3",
     "marked": "^0.3.12",
     "monaco-editor": "0.13.1",
+    "monaco-editor-webpack-plugin": "^1.2.1",
     "mousetrap": "^1.4.6",
     "pikaday": "^1.6.1",
     "popper.js": "^1.14.3",

yarn.lock

@@ -5329,6 +5329,10 @@ moment@2.x, moment@^2.18.1:
   version "2.19.2"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.2.tgz#8a7f774c95a64550b4c7ebd496683908f9419dbe"
 
+monaco-editor-webpack-plugin@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.2.1.tgz#577ed091420f422bb8f0ff3a8899dd82344da56d"
+
 monaco-editor@0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.13.1.tgz#6b9ce20e4d1c945042d256825eb133cb23315a52"