angular-monaco-example/webpack.config.ts at master · kprasad99/angular-monaco-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
import * as webpack from 'webpack';
import * as path from 'path';

export default (config: webpack.Configuration) => {
  config?.plugins?.push(
    new MonacoWebpackPlugin({
      // a ton of languages are lazily loaded by default, but we dont use any of them
      languages: ['json', 'yaml'],
      // we can disable features that we end up not needing/using
      features: [
        'accessibilityHelp',
        'anchorSelect',
        'bracketMatching',
        // 'browser',
        'caretOperations',
        'clipboard',
        // 'codeAction',
        // 'codelens',
        // 'colorPicker',
        'comment',
        'contextmenu',
        'copyPaste',
        'cursorUndo',
        // 'dnd',
        // 'documentSymbols',
        // 'dropIntoEditor',
        'find',
        'folding',
        // 'fontZoom',
        'format',
        'gotoError',
        'gotoLine',
        // 'gotoSymbol',
        'hover',
        // 'iPadShowKeyboard',
        // 'inPlaceReplace',
        'indentation',
        // 'inlayHints',
        'inlineCompletions',
        // 'inspectTokens',
        'lineSelection',
        'linesOperations',
        // 'linkedEditing',
        // 'links',
        // 'multicursor',
        // 'parameterHints',
        // 'quickCommand',
        // 'quickHelp',
        // 'quickOutline',
        // 'readOnlyMessage',
        // 'referenceSearch',
        // 'rename',
        'smartSelect',
        // 'snippet',
        'stickyScroll',
        'suggest',
        // 'toggleHighContrast',
        'toggleTabFocusMode',
        'tokenization',
        'unicodeHighlighter',
        // 'unusualLineTerminators',
        // 'viewportSemanticTokens',
        'wordHighlighter',
        'wordOperations',
        'wordPartOperations'
      ],
      customLanguages: [
        {
          label: 'yaml',
          entry: 'monaco-yaml',
          worker: {
            id: 'monaco-yaml/yamlWorker',
            entry: 'monaco-yaml/yaml.worker'
          }
        }
      ]
    })
  );

  // Ensure output publicPath is set correctly for assets
  if (config.output) {
    config.output.publicPath = '';
  }

  // Remove the existing css loader rule for monaco
  const cssRuleIdx = config?.module?.rules?.findIndex((rule: any) => rule.test?.toString().includes(':css'));
  if (cssRuleIdx !== -1) {
    config?.module?.rules?.splice(cssRuleIdx!, 1);
  }

  config?.module?.rules?.push(
    {
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            url: true,
            import: true
          }
        }
      ]
    },
    // Handle Monaco Editor font files (codicons) - must process ttf files from node_modules
    {
      test: /\.ttf$/,
      type: 'asset/resource',
      generator: {
        filename: 'assets/fonts/[name][ext]',
        publicPath: '/'
      }
    }
  );
  return config;
};