feat: editor

config/webpack.config.js

@@ -25,7 +25,8 @@ const ForkTsCheckerWebpackPlugin =
     ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
     : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-
+const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')
+const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');
 const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
@@ -200,14 +201,7 @@ module.exports = function (webpackEnv) {
       : isEnvDevelopment && 'cheap-module-source-map',
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
-    entry: {
-      app: paths.appIndexJs,
-      'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
-      'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
-      'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
-      'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
-      'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
-    },
+    entry: paths.appIndexJs,
     output: {
       // The build folder.
       path: paths.appBuild,
@@ -497,6 +491,7 @@ module.exports = function (webpackEnv) {
             // using the extension .module.css
             {
               test: cssModuleRegex,
+							include: MONACO_DIR,
               use: getStyleLoaders({
                 importLoaders: 1,
                 sourceMap: isEnvProduction
@@ -570,6 +565,9 @@ module.exports = function (webpackEnv) {
       ].filter(Boolean),
     },
     plugins: [
+			new MonacoEditorPlugin({
+				languages: ['json', 'typescript', 'javascript']
+			}),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
         Object.assign(