diff --git a/.vscode/settings.json b/.vscode/settings.json index c58344848..6b17a3a06 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,7 +4,7 @@ "**/all.min.js": true }, "files.exclude": { - "**/node_modules": true, + "**/node_modules": false, "**/.github": false }, "files.trimTrailingWhitespace": true, @@ -12,17 +12,14 @@ "source.fixAll.eslint": true }, "eslint.format.enable": true, - "editor.formatOnSave": true, - "editor.formatOnPaste": true, + "editor.formatOnSave": false, + "editor.formatOnPaste": false, "typescript.updateImportsOnFileMove.enabled": "always", - "eslint.validate": [ - "typescript", - "typescriptreact" - ], + "eslint.validate": ["typescript", "typescriptreact"], "explorer.fileNesting.enabled": true, "explorer.fileNesting.patterns": { "*.ts": "$(capture).js, $(capture).d.ts, $(capture).spec.ts", "*.tsx": "$(capture).ts, $(capture).d.ts, $(capture).spec.tsx, $(capture).styles.ts", "package.json": "package-lock.json, .npmrc" - } -} \ No newline at end of file + }, +} diff --git a/config/webpack.config.js b/config/webpack.config.js index cb8d732f2..6a460cbb2 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -1,5 +1,3 @@ - - const fs = require('fs'); const path = require('path'); const webpack = require('webpack'); @@ -17,6 +15,7 @@ const paths = require('./paths'); const getClientEnvironment = require('./env'); const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); const ESLintPlugin = require('eslint-webpack-plugin'); // Source maps are resource heavy and can cause out of memory issue for large source files. @@ -43,11 +42,11 @@ const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; -const hasJsxRuntime = (() => { +const hasJsxRuntime = () => { if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') { return false; } -}) +}; // This is the production and development configuration. // It is focused on developer experience, fast rebuilds, and a minimal bundle. @@ -156,7 +155,7 @@ module.exports = function (webpackEnv) { ].filter(Boolean), output: { // The build folder. - path: isEnvProduction ? paths.appBuild : undefined, + path: isEnvProduction ? paths.appBuild : path.resolve(__dirname, 'dist'), // Add /* filename */ comments to generated require()s in the output. pathinfo: isEnvDevelopment, // There will be one main bundle, and one file per asynchronous chunk. @@ -389,21 +388,22 @@ module.exports = function (webpackEnv) { 'sass-loader' ) }, + { + test: /\.ttf$/, + type: 'asset/resource' + }, // "file" loader makes sure those assets get served by WebpackDevServer. // When you `import` an asset, you get its (virtual) filename. // In production, they would get copied to the `build` folder. // This loader doesn't use a "test" so it will catch all modules // that fall through the other loaders. { - loader: require.resolve('file-loader'), // Exclude `js` files to keep "css" loader working as it injects // its runtime that would otherwise be processed through "file" loader. // Also exclude `html` and `json` extensions so they get processed // by webpacks internal loaders. - exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/], - options: { - name: 'static/media/[name].[contenthash:8].[ext]' - } + exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /data:image\/svg\+xml;/], + type: 'asset/resource' } // ** STOP ** Are you adding a new loader? // Make sure to add the new loader(s) before the "file" loader. @@ -415,6 +415,19 @@ module.exports = function (webpackEnv) { new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }), + new MonacoWebpackPlugin({ + languages: [ + 'json', + 'typescript', + 'javascript', + 'css', + 'java', + 'csharp', + 'html', + 'powershell', + 'go' + ] + }), // Generates an `index.html` file with the