20241113-a

config/env.js

@@ -0,0 +1,106 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+    throw new Error(
+        'The NODE_ENV environment variable is required but was not specified.'
+    );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+const dotenvFiles = [
+    `${paths.dotenv}.${NODE_ENV}.local`,
+    // Don't include `.env.local` for `test` environment
+    // since normally you expect tests to produce the same
+    // results for everyone
+    NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+    `${paths.dotenv}.${NODE_ENV}`,
+    paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach((dotenvFile) => {
+    if (fs.existsSync(dotenvFile)) {
+        require('dotenv-expand').expand(
+            require('dotenv').config({
+                path: dotenvFile,
+            })
+        );
+    }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebook/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+    .split(path.delimiter)
+    .filter((folder) => folder && !path.isAbsolute(folder))
+    .map((folder) => path.resolve(appDirectory, folder))
+    .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+    const raw = Object.keys(process.env)
+        .filter((key) => REACT_APP.test(key))
+        .reduce(
+            (env, key) => {
+                env[key] = process.env[key];
+                return env;
+            },
+            {
+                // Useful for determining whether we’re running in production mode.
+                // Most importantly, it switches React into the correct mode.
+                NODE_ENV: process.env.NODE_ENV || 'development',
+                // Useful for resolving the correct path to static assets in `public`.
+                // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+                // This should only be used as an escape hatch. Normally you would put
+                // images into the `src` and `import` them in code to get their paths.
+                PUBLIC_URL: publicUrl,
+                // We support configuring the sockjs pathname during development.
+                // These settings let a developer run multiple simultaneous projects.
+                // They are used as the connection `hostname`, `pathname` and `port`
+                // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
+                // and `sockPort` options in webpack-dev-server.
+                WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
+                WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
+                WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+                // Whether or not react-refresh is enabled.
+                // react-refresh is not 100% stable at this time,
+                // which is why it's disabled by default.
+                // It is defined here so it is available in the webpackHotDevClient.
+                FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
+            }
+        );
+    // Stringify all values so we can feed into webpack DefinePlugin
+    const stringified = {
+        'process.env': Object.keys(raw).reduce((env, key) => {
+            env[key] = JSON.stringify(raw[key]);
+            return env;
+        }, {}),
+    };
+
+    return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;

config/getHttpsConfig.js

@@ -0,0 +1,70 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const chalk = require('react-dev-utils/chalk');
+const paths = require('./paths');
+
+// Ensure the certificate and key provided are valid and if not
+// throw an easy to debug error
+function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
+    let encrypted;
+    try {
+        // publicEncrypt will throw an error with an invalid cert
+        encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
+    } catch (err) {
+        throw new Error(
+            `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${
+                err.message
+            }`
+        );
+    }
+
+    try {
+        // privateDecrypt will throw an error with an invalid key
+        crypto.privateDecrypt(key, encrypted);
+    } catch (err) {
+        throw new Error(
+            `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
+                err.message
+            }`
+        );
+    }
+}
+
+// Read file and throw an error if it doesn't exist
+function readEnvFile(file, type) {
+    if (!fs.existsSync(file)) {
+        throw new Error(
+            `You specified ${chalk.cyan(
+                type
+            )} in your env, but the file "${chalk.yellow(
+                file
+            )}" can't be found.`
+        );
+    }
+    return fs.readFileSync(file);
+}
+
+// Get the https config
+// Return cert files if provided in env, otherwise just true or false
+function getHttpsConfig() {
+    const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
+    const isHttps = HTTPS === 'true';
+
+    if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
+        const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
+        const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
+        const config = {
+            cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
+            key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+        };
+
+        validateKeyAndCerts({ ...config, keyFile, crtFile });
+        return config;
+    }
+    return isHttps;
+}
+
+module.exports = getHttpsConfig;

config/modules.js

@@ -0,0 +1,134 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+const chalk = require('react-dev-utils/chalk');
+const resolve = require('resolve');
+
+/**
+ * Get additional module paths based on the baseUrl of a compilerOptions object.
+ *
+ * @param {Object} options
+ */
+function getAdditionalModulePaths(options = {}) {
+    const baseUrl = options.baseUrl;
+
+    if (!baseUrl) {
+        return '';
+    }
+
+    const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+    // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
+    // the default behavior.
+    if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
+        return null;
+    }
+
+    // Allow the user set the `baseUrl` to `appSrc`.
+    if (path.relative(paths.appSrc, baseUrlResolved) === '') {
+        return [paths.appSrc];
+    }
+
+    // If the path is equal to the root directory we ignore it here.
+    // We don't want to allow importing from the root directly as source files are
+    // not transpiled outside of `src`. We do allow importing them with the
+    // absolute path (e.g. `src/Components/Button.js`) but we set that up with
+    // an alias.
+    if (path.relative(paths.appPath, baseUrlResolved) === '') {
+        return null;
+    }
+
+    // Otherwise, throw an error.
+    throw new Error(
+        chalk.red.bold(
+            "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
+                ' Create React App does not support other values at this time.'
+        )
+    );
+}
+
+/**
+ * Get webpack aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getWebpackAliases(options = {}) {
+    const baseUrl = options.baseUrl;
+
+    if (!baseUrl) {
+        return {};
+    }
+
+    const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+    if (path.relative(paths.appPath, baseUrlResolved) === '') {
+        return {
+            src: paths.appSrc,
+        };
+    }
+}
+
+/**
+ * Get jest aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getJestAliases(options = {}) {
+    const baseUrl = options.baseUrl;
+
+    if (!baseUrl) {
+        return {};
+    }
+
+    const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+    if (path.relative(paths.appPath, baseUrlResolved) === '') {
+        return {
+            '^src/(.*)$': '<rootDir>/src/$1',
+        };
+    }
+}
+
+function getModules() {
+    // Check if TypeScript is setup
+    const hasTsConfig = fs.existsSync(paths.appTsConfig);
+    const hasJsConfig = fs.existsSync(paths.appJsConfig);
+
+    if (hasTsConfig && hasJsConfig) {
+        throw new Error(
+            'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
+        );
+    }
+
+    let config;
+
+    // If there's a tsconfig.json we assume it's a
+    // TypeScript project and set up the config
+    // based on tsconfig.json
+    if (hasTsConfig) {
+        const ts = require(resolve.sync('typescript', {
+            basedir: paths.appNodeModules,
+        }));
+        config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
+        // Otherwise we'll check if there is jsconfig.json
+        // for non TS projects.
+    } else if (hasJsConfig) {
+        config = require(paths.appJsConfig);
+    }
+
+    config = config || {};
+    const options = config.compilerOptions || {};
+
+    const additionalModulePaths = getAdditionalModulePaths(options);
+
+    return {
+        additionalModulePaths: additionalModulePaths,
+        webpackAliases: getWebpackAliases(options),
+        jestAliases: getJestAliases(options),
+        hasTsConfig,
+    };
+}
+
+module.exports = getModules();

config/paths.js

@@ -0,0 +1,74 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+const publicUrlOrPath = getPublicUrlOrPath(
+    process.env.NODE_ENV === 'development',
+    require(resolveApp('package.json')).homepage,
+    process.env.PUBLIC_URL
+);
+
+const buildPath = process.env.BUILD_PATH || 'dist';
+
+const moduleFileExtensions = [
+    'web.mjs',
+    'mjs',
+    'web.js',
+    'js',
+    'web.ts',
+    'ts',
+    'web.tsx',
+    'tsx',
+    'json',
+    'web.jsx',
+    'jsx',
+];
+
+// Resolve file paths in the same order as webpack
+const resolveModule = (resolveFn, filePath) => {
+    const extension = moduleFileExtensions.find((extension) =>
+        fs.existsSync(resolveFn(`${filePath}.${extension}`))
+    );
+
+    if (extension) {
+        return resolveFn(`${filePath}.${extension}`);
+    }
+
+    return resolveFn(`${filePath}.js`);
+};
+
+// config after eject: we're in ./config/
+module.exports = {
+    dotenv: resolveApp('.env'),
+    appPath: resolveApp('.'),
+    appBuild: resolveApp(buildPath),
+    appPublic: resolveApp('public'),
+    appHtml: resolveApp('public/index.html'),
+    appIndexJs: resolveModule(resolveApp, 'src/index'),
+    appEditorJs: resolveModule(resolveApp, 'src/editor'),
+    appPackageJson: resolveApp('package.json'),
+    appSrc: resolveApp('src'),
+    appTsConfig: resolveApp('tsconfig.json'),
+    appJsConfig: resolveApp('jsconfig.json'),
+    yarnLockFile: resolveApp('yarn.lock'),
+    testsSetup: resolveModule(resolveApp, 'src/setupTests'),
+    proxySetup: resolveApp('src/setupProxy.js'),
+    appNodeModules: resolveApp('node_modules'),
+    swSrc: resolveModule(resolveApp, 'src/service-worker'),
+    publicUrlOrPath,
+};
+
+module.exports.moduleFileExtensions = moduleFileExtensions;

config/pnpTs.js

@@ -0,0 +1,35 @@
+'use strict';
+
+const { resolveModuleName } = require('ts-pnp');
+
+exports.resolveModuleName = (
+    typescript,
+    moduleName,
+    containingFile,
+    compilerOptions,
+    resolutionHost
+) => {
+    return resolveModuleName(
+        moduleName,
+        containingFile,
+        compilerOptions,
+        resolutionHost,
+        typescript.resolveModuleName
+    );
+};
+
+exports.resolveTypeReferenceDirective = (
+    typescript,
+    moduleName,
+    containingFile,
+    compilerOptions,
+    resolutionHost
+) => {
+    return resolveModuleName(
+        moduleName,
+        containingFile,
+        compilerOptions,
+        resolutionHost,
+        typescript.resolveTypeReferenceDirective
+    );
+};

config/webpack.config.js

@@ -0,0 +1,621 @@
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const PnpWebpackPlugin = require('pnp-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+// const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
+
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+const smp = new SpeedMeasurePlugin();
+
+const apiMocker = require('mocker-api');
+const paths = require('./paths');
+const modules = require('./modules');
+const getClientEnvironment = require('./env');
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+
+const webpackDevClientEntry = require.resolve(
+    'react-dev-utils/webpackHotDevClient'
+);
+const reactRefreshOverlayEntry = require.resolve(
+    'react-dev-utils/refreshOverlayInterop'
+);
+
+const imageInlineSizeLimit = parseInt(
+    process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
+);
+
+// Get the path to the uncompiled service worker (if it exists).
+const swSrc = paths.swSrc;
+
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+webpackConfig = function (webpackEnv) {
+    const isEnvDevelopment = webpackEnv === 'development';
+    const isEnvProduction = webpackEnv === 'production';
+
+    // Variable used for enabling profiling in Production
+    // passed into alias object. Uses a flag if passed into the build command
+    const isEnvProductionProfile =
+        isEnvProduction && process.argv.includes('--profile');
+
+    // We will provide `paths.publicUrlOrPath` to our app
+    // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+    // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+    // Get environment variables to inject into our app.
+    const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+
+    const shouldUseReactRefresh = true;//env.raw.FAST_REFRESH;
+
+    const getStyleLoaders = (cssOptions, preProcessor) => {
+        const loaders = [
+            isEnvDevelopment && require.resolve('style-loader'),
+            isEnvProduction && {
+                loader: MiniCssExtractPlugin.loader,
+                // css is located in `static/css`, use '../../' to locate index.html folder
+                // in production `paths.publicUrlOrPath` can be a relative path
+                options: paths.publicUrlOrPath.startsWith('.')
+                    ? { publicPath: '../../' }
+                    : {},
+            },
+            {
+                loader: require.resolve('css-loader'),
+                options: cssOptions,
+            },
+            {
+                // Options for PostCSS as we reference these options twice
+                // Adds vendor prefixing based on your specified browser support in
+                // package.json
+                loader: require.resolve('postcss-loader'),
+            },
+        ].filter(Boolean);
+        if (preProcessor) {
+            loaders.push(
+                {
+                    loader: require.resolve('resolve-url-loader'),
+                    options: {
+                        sourceMap: isEnvProduction
+                            ? shouldUseSourceMap
+                            : isEnvDevelopment,
+                        root: paths.appSrc,
+                    },
+                },
+                {
+                    loader: require.resolve(preProcessor),
+                    options: {
+                        sourceMap: true,
+                    },
+                }
+            );
+        }
+        return loaders;
+    };
+    return {
+        mode: isEnvProduction
+            ? 'production'
+            : isEnvDevelopment && 'development',
+        context: path.resolve(__dirname, '../'),
+        entry: {
+            main:
+                isEnvDevelopment && !shouldUseReactRefresh
+                    ? [
+                        // Include an alternative client for WebpackDevServer. A client's job is to
+                        // connect to WebpackDevServer by a socket and get notified about changes.
+                        // When you save a file, the client will either apply hot updates (in case
+                        // of CSS changes), or refresh the page (in case of JS changes). When you
+                        // make a syntax error, this client will display a syntax error overlay.
+                        // Note: instead of the default WebpackDevServer client, we use a custom one
+                        // to bring better experience for Create React App users. You can replace
+                        // the line below with these two lines if you prefer the stock client:
+                        //
+                        // require.resolve('webpack-dev-server/client') + '?/',
+                        // require.resolve('webpack/hot/dev-server'),
+                        //
+                        // When using the experimental react-refresh integration,
+                        // the webpack plugin takes care of injecting the dev client for us.
+                        webpackDevClientEntry,
+                        // Finally, this is your app's code:
+                        paths.appIndexJs,
+                        // We include the app code last so that if there is a runtime error during
+                        // initialization, it doesn't blow up the WebpackDevServer client, and
+                        // changing JS code would still trigger a refresh.
+                    ]
+                    : 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',
+        },
+        output: {
+            // The build folder.
+            path: isEnvProduction ? paths.appBuild : undefined,
+            // Add /* filename */ comments to generated require()s in the output.
+            pathinfo: isEnvDevelopment,
+            // There will be one main bundle, and one file per asynchronous chunk.
+            // In development, it does not produce real files.
+            filename: isEnvProduction
+                ? 'static/js/[name].[contenthash:8].js'
+                : isEnvDevelopment && 'static/js/[name].bundle.js',
+
+            // There are also additional JS chunk files if you use code splitting.
+            chunkFilename: isEnvProduction
+                ? 'static/js/[name].[contenthash:8].chunk.js'
+                : isEnvDevelopment && 'static/js/[name].chunk.js',
+            // webpack uses `publicPath` to determine where the app is being served from.
+            // It requires a trailing slash, or the file assets will get an incorrect path.
+            // We inferred the "public path" (such as / or /my-project) from homepage.
+            publicPath: paths.publicUrlOrPath,
+            // Point sourcemap entries to original disk location (format as URL on Windows)
+            devtoolModuleFilenameTemplate: isEnvProduction
+                ? (info) =>
+                    path
+                        .relative(paths.appSrc, info.absoluteResourcePath)
+                        .replace(/\\/g, '/')
+                : isEnvDevelopment &&
+                ((info) =>
+                    path
+                        .resolve(info.absoluteResourcePath)
+                        .replace(/\\/g, '/')),
+        },
+        optimization: {
+            minimize: true,
+            minimizer: [
+                // This is only used in production mode
+                new TerserPlugin({
+                    terserOptions: {
+                        parse: {
+                            // We want terser to parse ecma 8 code. However, we don't want it
+                            // to apply any minification steps that turns valid ecma 5 code
+                            // into invalid ecma 5 code. This is why the 'compress' and 'output'
+                            // sections only apply transformations that are ecma 5 safe
+                            // https://github.com/facebook/create-react-app/pull/4234
+                            ecma: 8,
+                        },
+                        compress: {
+                            ecma: 5,
+                            warnings: false,
+                            // Disabled because of an issue with Uglify breaking seemingly valid code:
+                            // https://github.com/facebook/create-react-app/issues/2376
+                            // Pending further investigation:
+                            // https://github.com/mishoo/UglifyJS2/issues/2011
+                            comparisons: false,
+                            // Disabled because of an issue with Terser breaking valid code:
+                            // https://github.com/facebook/create-react-app/issues/5250
+                            // Pending further investigation:
+                            // https://github.com/terser-js/terser/issues/120
+                            inline: 2,
+                        },
+                        mangle: {
+                            safari10: true,
+                        },
+                        // Added for profiling in devtools
+                        //   keep_classnames: isEnvProductionProfile,
+                        //   keep_fnames: isEnvProductionProfile,
+                        output: {
+                            ecma: 5,
+                            comments: false,
+                            // Turned on because emoji and regex is not minified properly using default
+                            // https://github.com/facebook/create-react-app/issues/2488
+                            ascii_only: true,
+                        },
+                    },
+                }),
+                // This is only used in production mode
+                new CssMinimizerPlugin({
+                    minimizerOptions: {
+                        preset: [
+                            'default',
+                            { minifyFontValues: { removeQuotes: false } },
+                        ],
+                    },
+                }),
+            ],
+            // Automatically split vendor and commons
+            // https://twitter.com/wSokra/status/969633336732905474
+            // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+            splitChunks: {
+                chunks: 'all',
+                name: false,
+            },
+            // Keep the runtime chunk separated to enable long term caching
+            // https://twitter.com/wSokra/status/969679223278505985
+            // https://github.com/facebook/create-react-app/issues/5358
+            runtimeChunk: {
+                name: (entrypoint) => `runtime-${entrypoint.name}`,
+            },
+        },
+        resolve: {
+            extensions: ['.tsx', '.ts', '.js', '.html', '.mjs'],
+            alias: {
+                '@': path.resolve(__dirname, '..', 'src'),
+            },
+            fallback: {
+                "util": false,
+                "path": false,
+                "stream": false,
+                "url": require.resolve('url')
+            },
+            conditionNames: ['require', 'browser', 'web'],
+            // This allows you to set a fallback for where webpack should look for modules.
+            // We placed these paths second because we want `node_modules` to "win"
+            // if there are any conflicts. This matches Node resolution mechanism.
+            // https://github.com/facebook/create-react-app/issues/253
+            modules: ['node_modules', paths.appNodeModules].concat(
+                modules.additionalModulePaths || []
+            ),
+            plugins: [
+                // Adds support for installing with Plug'n'Play, leading to faster installs and adding
+                // guards against forgotten dependencies and such.
+                PnpWebpackPlugin,
+                // Prevents users from importing files from outside of src/ (or node_modules/).
+                // This often causes confusion because we only process files within src/ with babel.
+                // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+                // please link the files into your node_modules/ and let module-resolution kick in.
+                // Make sure your source files are compiled, as they will not be processed in any way.
+                // new ModuleScopePlugin(paths.appSrc, [
+                //     paths.appPackageJson,
+                //     reactRefreshOverlayEntry,
+                // ]),
+            ],
+        },
+        resolveLoader: {
+            plugins: [
+                // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
+                // from the current package.
+                PnpWebpackPlugin.moduleLoader(module),
+            ],
+        },
+        module: {
+            rules: [
+                // Disable require.ensure as it's not a standard language feature.
+                // { parser: { requireEnsure: false } },
+                {
+                    oneOf: [
+                        // {
+                        //     test: /froala-editor/,
+                        //     parser: {
+                        //         amd: false,
+                        //     },
+                        // },
+                        {
+                            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+                            loader: require.resolve('url-loader'),
+                            options: {
+                                limit: imageInlineSizeLimit,
+                                name: 'static/media/[name].[hash:8].[ext]',
+                            },
+                        },
+                        // Process application JS with Babel.
+                        // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+                        {
+                            test: /\.(js|cjs|mjs|jsx|ts|tsx)$/,
+                            include: paths.appSrc,
+                            loader: require.resolve('babel-loader'),
+                            options: {
+                                plugins: [
+                                    // [
+                                    //     require.resolve('babel-plugin-named-asset-import'),
+                                    //     {
+                                    //         loaderMap: {
+                                    //             svg: {
+                                    //                 ReactComponent:
+                                    //                     '@svgr/webpack?-svgo,+titleProp,+ref![path]',
+                                    //             },
+                                    //         },
+                                    //     },
+                                    // ],
+                                    isEnvDevelopment &&
+                                    shouldUseReactRefresh &&
+                                    require.resolve('react-refresh/babel'),
+                                ].filter(Boolean),
+                                cacheDirectory: true,
+                                compact: isEnvProduction,
+                            },
+                        },
+                        // "postcss" loader applies autoprefixer to our CSS.
+                        // "css" loader resolves paths in CSS and adds assets as dependencies.
+                        // "style" loader turns CSS into JS modules that inject <style> tags.
+                        // In production, we use MiniCSSExtractPlugin to extract that CSS
+                        // to a file, but in development "style" loader enables hot editing
+                        // of CSS.
+                        // By default we support CSS Modules with the extension .module.css
+                        {
+                            test: cssRegex,
+                            exclude: cssModuleRegex,
+                            use: getStyleLoaders({
+                                importLoaders: 1,
+                                sourceMap: isEnvProduction
+                                    ? shouldUseSourceMap
+                                    : isEnvDevelopment,
+                            }),
+                            // Don't consider CSS imports dead code even if the
+                            // containing package claims to have no side effects.
+                            // Remove this when webpack adds a warning or an error for this.
+                            // See https://github.com/webpack/webpack/issues/6571
+                            sideEffects: true,
+                        },
+                        // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+                        // using the extension .module.css
+                        {
+                            test: cssModuleRegex,
+                            use: getStyleLoaders({
+                                importLoaders: 1,
+                                sourceMap: isEnvProduction
+                                    ? shouldUseSourceMap
+                                    : isEnvDevelopment,
+                                modules: {
+                                    getLocalIdent: getCSSModuleLocalIdent,
+                                },
+                            }),
+                        },
+                        // Opt-in support for SASS (using .scss or .sass extensions).
+                        // By default we support SASS Modules with the
+                        // extensions .module.scss or .module.sass
+                        {
+                            test: sassRegex,
+                            exclude: sassModuleRegex,
+                            use: getStyleLoaders(
+                                {
+                                    importLoaders: 3,
+                                    sourceMap: isEnvProduction
+                                        ? shouldUseSourceMap
+                                        : isEnvDevelopment,
+                                },
+                                'sass-loader'
+                            ),
+                            // Don't consider CSS imports dead code even if the
+                            // containing package claims to have no side effects.
+                            // Remove this when webpack adds a warning or an error for this.
+                            // See https://github.com/webpack/webpack/issues/6571
+                            sideEffects: true,
+                        },
+                        // Adds support for CSS Modules, but using SASS
+                        // using the extension .module.scss or .module.sass
+                        {
+                            test: sassModuleRegex,
+                            use: getStyleLoaders(
+                                {
+                                    importLoaders: 3,
+                                    sourceMap: isEnvProduction
+                                        ? shouldUseSourceMap
+                                        : isEnvDevelopment,
+                                    modules: {
+                                        getLocalIdent: getCSSModuleLocalIdent,
+                                    },
+                                },
+                                'sass-loader'
+                            ),
+                        },
+                        // "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|cjs|mjs|jsx|ts|tsx)$/,
+                                /\.html$/,
+                                /\.json$/,
+                            ],
+                            options: {
+                                name: 'static/media/[name].[hash:8].[ext]',
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        plugins: [
+            // Generates an `index.html` file with the <script> injected.
+            new HtmlWebpackPlugin(
+                Object.assign(
+                    {},
+                    {
+                        inject: true,
+                        template: paths.appHtml,
+                    },
+                    isEnvProduction
+                        ? {
+                            minify: {
+                                removeComments: true,
+                                collapseWhitespace: true,
+                                removeRedundantAttributes: true,
+                                useShortDoctype: true,
+                                removeEmptyAttributes: true,
+                                removeStyleLinkTypeAttributes: true,
+                                keepClosingSlash: true,
+                                minifyJS: true,
+                                minifyCSS: true,
+                                minifyURLs: true,
+                            },
+                        }
+                        : undefined
+                )
+            ),
+            // Inlines the webpack runtime script. This script is too small to warrant
+            // a network request.
+            // https://github.com/facebook/create-react-app/issues/5358
+            isEnvProduction &&
+            shouldInlineRuntimeChunk &&
+            new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [
+                /runtime-.+[.]js/,
+            ]),
+            // Makes some environment variables available in index.html.
+            // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+            // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+            // It will be an empty string unless you specify "homepage"
+            // in `package.json`, in which case it will be the pathname of that URL.
+            new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+            // This gives some necessary context to module not found errors, such as
+            // the requesting resource.
+            new ModuleNotFoundPlugin(paths.appPath),
+            // Makes some environment variables available to the JS code, for example:
+            // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+            // It is absolutely essential that NODE_ENV is set to production
+            // during a production build.
+            // Otherwise React will be compiled in the very slow development mode.
+            new webpack.DefinePlugin(env.stringified),
+            // This is necessary to emit hot updates (CSS and Fast Refresh):
+            isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+            // Experimental hot reloading for React .
+            // https://github.com/facebook/react/tree/master/packages/react-refresh
+            isEnvDevelopment &&
+            shouldUseReactRefresh &&
+            new ReactRefreshWebpackPlugin({
+                overlay: {
+                    entry: webpackDevClientEntry,
+                    // The expected exports are slightly different from what the overlay exports,
+                    // so an interop is included here to enable feedback on module-level errors.
+                    module: reactRefreshOverlayEntry,
+                    // Since we ship a custom dev client and overlay integration,
+                    // the bundled socket handling logic can be eliminated.
+                    sockIntegration: false,
+                },
+            }),
+            // Watcher doesn't work well if you mistype casing in a path so we use
+            // a plugin that prints an error when you attempt to do this.
+            // See https://github.com/facebook/create-react-app/issues/240
+            isEnvDevelopment && new CaseSensitivePathsPlugin(),
+            isEnvProduction &&
+            new MiniCssExtractPlugin({
+                // Options similar to the same options in webpackOptions.output
+                // both options are optional
+                filename: 'static/css/[name].[contenthash:8].css',
+                chunkFilename:
+                    'static/css/[name].[contenthash:8].chunk.css',
+            }),
+            // Generate an asset manifest file with the following content:
+            // - "files" key: Mapping of all asset filenames to their corresponding
+            //   output file so that tools can pick it up without having to parse
+            //   `index.html`
+            // - "entrypoints" key: Array of files which are included in `index.html`,
+            //   can be used to reconstruct the HTML if necessary
+            new WebpackManifestPlugin({
+                fileName: 'asset-manifest.json',
+                publicPath: paths.publicUrlOrPath,
+                generate: (seed, files, entrypoints) => {
+                    const manifestFiles = files.reduce((manifest, file) => {
+                        manifest[file.name] = file.path;
+                        return manifest;
+                    }, seed);
+                    const entrypointFiles = entrypoints.main.filter(
+                        (fileName) => !fileName.endsWith('.map')
+                    );
+
+                    return {
+                        files: manifestFiles,
+                        entrypoints: entrypointFiles,
+                    };
+                },
+            }),
+            // Moment.js is an extremely popular library that bundles large locale files
+            // by default due to how webpack interprets its code. This is a practical
+            // solution that requires the user to opt into importing specific locales.
+            // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+            // You can remove this if you don't use Moment.js:
+            new webpack.IgnorePlugin({
+                resourceRegExp: /^\.\/locale$/,
+                contextRegExp: /moment$/,
+            }),
+            isEnvProduction &&
+            fs.existsSync(swSrc) &&
+            new WorkboxWebpackPlugin.InjectManifest({
+                swSrc,
+                dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
+                exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
+                // Bump up the default maximum size (2mb) that's precached,
+                // to make lazy-loading failure scenarios less likely.
+                // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
+                maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+            }),
+            // useTypeScript &&
+            // new ForkTsCheckerWebpackPlugin({
+            //     typescript: resolve.sync('typescript', {
+            //         basedir: paths.appNodeModules,
+            //     }),
+            //     async: isEnvDevelopment,
+            //     checkSyntacticErrors: true,
+            //     resolveModuleNameModule: process.versions.pnp
+            //         ? `${__dirname}/pnpTs.js`
+            //         : undefined,
+            //     resolveTypeReferenceDirectiveModule: process.versions.pnp
+            //         ? `${__dirname}/pnpTs.js`
+            //         : undefined,
+            //     tsconfig: paths.appTsConfig,
+            //     reportFiles: [
+            //         // This one is specifically to match during CI tests,
+            //         // as micromatch doesn't match
+            //         // '../cra-template-typescript/template/src/App.tsx'
+            //         // otherwise.
+            //         '../**/src/**/*.{ts,tsx}',
+            //         '**/src/**/*.{ts,tsx}',
+            //         '!**/src/**/__tests__/**',
+            //         '!**/src/**/?(*.)(spec|test).*',
+            //         '!**/src/setupProxy.*',
+            //         '!**/src/setupTests.*',
+            //     ],
+            //     silent: true,
+            //     // The formatter is invoked directly in WebpackDevServerUtils during development
+            //     formatter: isEnvProduction ? typescriptFormatter : undefined,
+            // }),
+            // !disableESLintPlugin &&
+            // new ESLintPlugin({
+            //     // Plugin options
+            //     extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+            //     formatter: require.resolve('react-dev-utils/eslintFormatter'),
+            //     eslintPath: require.resolve('eslint'),
+            //     failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
+            //     context: paths.appSrc,
+            //     cache: true,
+            //     cacheLocation: path.resolve(
+            //         paths.appNodeModules,
+            //         '.cache/.eslintcache'
+            //     ),
+            //     // ESLint class options
+            //     cwd: paths.appPath,
+            //     resolvePluginsRelativeTo: __dirname,
+            //     baseConfig: {
+            //         extends: [require.resolve('eslint-config-react-app/base')],
+            //         rules: {
+            //             ...(!hasJsxRuntime && {
+            //                 'react/react-in-jsx-scope': 'error',
+            //             }),
+            //         },
+            //     },
+            // }),
+            isEnvProduction && new BundleAnalyzerPlugin({ analyzerMode: 'static', generateStatsFile: true })
+        ].filter(Boolean),
+        // Turn off performance processing because we utilize
+        // our own hints via the FileSizeReporter
+        performance: false,
+    };
+};
+
+module.exports = webpackConfig;
+// 打印每个模块的执行速度
+// https://github.com/stephencookdev/speed-measure-webpack-plugin/issues/167
+// module.exports = smp.wrap(webpackConfig);

config/webpackDevServer.config.js

@@ -0,0 +1,79 @@
+'use strict';
+
+const fs = require('fs');
+const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
+const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
+const ignoredFiles = require('react-dev-utils/ignoredFiles');
+const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
+const paths = require('./paths');
+const getHttpsConfig = require('./getHttpsConfig');
+
+const host = process.env.HOST || '0.0.0.0';
+const sockHost = process.env.WDS_SOCKET_HOST;
+const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
+const sockPort = process.env.WDS_SOCKET_PORT;
+
+module.exports = function (proxy, allowedHost) {
+    const disableFirewall =
+        !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === "true";
+    return {
+        allowedHosts: disableFirewall ? "all" : [allowedHost],
+        compress: true,
+        static: {
+            directory: paths.appPublic,
+            publicPath: paths.publicUrlOrPath,
+            watch: {
+                ignored: ignoredFiles(paths.appSrc),
+            }
+        },
+        client: {
+            webSocketURL: {
+                hostname: sockHost,
+                pathname: sockPath,
+                port: sockPort,
+            },
+            overlay: true,
+        },
+        devMiddleware: {
+            // It is important to tell WebpackDevServer to use the same "publicPath" path as
+            // we specified in the webpack config. When homepage is '.', default to serving
+            // from the root.
+            // remove last slash so user can land on `/test` instead of `/test/`
+            publicPath: paths.publicUrlOrPath.slice(0, -1),
+        },
+        https: getHttpsConfig(),
+        host,
+        historyApiFallback: {
+            // Paths with dots should still use the history fallback.
+            // See https://github.com/facebook/create-react-app/issues/387.
+            disableDotRule: true,
+            index: paths.publicUrlOrPath,
+        },
+        // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
+        proxy,
+        onBeforeSetupMiddleware(server) {
+            const app = server.app;
+            // Keep `evalSourceMapMiddleware`
+            // middlewares before `redirectServedPath` otherwise will not have any effect
+            // This lets us fetch source contents from webpack for the error overlay
+            app.use(evalSourceMapMiddleware(server));
+
+            if (fs.existsSync(paths.proxySetup)) {
+                // This registers user provided middleware for proxy reasons
+                require(paths.proxySetup)(app);
+            }
+        },
+        onAfterSetupMiddleware(server) {
+            const app = server.app;
+            // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
+            app.use(redirectServedPath(paths.publicUrlOrPath));
+
+            // This service worker file is effectively a 'no-op' that will reset any
+            // previous service worker registered for the same host:port combination.
+            // We do this in development to avoid hitting the production cache if
+            // it used the same host and port.
+            // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
+            app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+        },
+    };
+};