<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong><br>
I've a react project in which I use the <a href="https://github.com/microsoft/monaco-editor-webpack-plugin">monaco-editor-webpack-plugin</a></p>
<p dir="auto">I want to bundle all dependencies to <code class="notranslate">monaco-editor</code> to a separate chunk.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="chunkFilename: isEnvProduction
        ? &quot;static/js/[name].[contenthash:8].chunk.js&quot;
        : isEnvDevelopment &amp;&amp; &quot;static/js/[name].chunk.js&quot;,
...
splitChunks: {
        chunks: &quot;all&quot;,
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vendor: {
            test: /[\\/](monaco-editor)[\\/]/,
            name: &quot;monaco-editor&quot;
          }
        }
},"><pre class="notranslate"><span class="pl-s1">chunkFilename</span>: <span class="pl-s1">isEnvProduction</span>
        ? <span class="pl-s">"static/js/[name].[contenthash:8].chunk.js"</span>
        : <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s">"static/js/[name].chunk.js"</span><span class="pl-kos">,</span>
...
<span class="pl-s1">splitChunks</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">chunks</span>: <span class="pl-s">"all"</span><span class="pl-kos">,</span>
        <span class="pl-c1">maxInitialRequests</span>: <span class="pl-v">Infinity</span><span class="pl-kos">,</span>
        <span class="pl-c1">minSize</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
        <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">vendor</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-kos">[</span><span class="pl-cce">\\</span>/<span class="pl-kos">]</span><span class="pl-kos">(</span>monaco-editor<span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-cce">\\</span>/<span class="pl-kos">]</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
            <span class="pl-c1">name</span>: <span class="pl-s">"monaco-editor"</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div>
<p dir="auto">When doing this I get the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="chunk runtime-main [entry]
Cannot convert undefined or null to object"><pre class="notranslate"><code class="notranslate">chunk runtime-main [entry]
Cannot convert undefined or null to object
</code></pre></div>
<p dir="auto">As you can see I'm using <code class="notranslate">contenthash</code> within my <code class="notranslate">chunkFilename</code> if I change this to <code class="notranslate">chunkhash</code> it works fine.</p>
<p dir="auto">I did some research in <code class="notranslate">monaco-editor-webpack-plugin</code> and I found out that it is using <code class="notranslate">new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })</code> for the workers that are added by the plugin. This seems to be the issue somehow.</p>
<p dir="auto">I tested this by defining an empty <code class="notranslate">languages</code> option for the plugin (the plugin doesn't add any worker that uses the <code class="notranslate">LimitChunkCountPlugin</code> when and empty array is defined):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="new MonacoWebpackPlugin({
        //does work
        languages: []
        // does not work
        languages: [&quot;json&quot;]
})"><pre class="notranslate"><code class="notranslate">new MonacoWebpackPlugin({
        //does work
        languages: []
        // does not work
        languages: ["json"]
})
</code></pre></div>
<p dir="auto">To reproduce this error download the repository below:<br>
<a href="https://github.com/webpack/webpack/files/3864485/my-app.zip">my-app.zip</a></p>
<p dir="auto">The <code class="notranslate">monaco-editor-webpack-plugin</code> is added on line <code class="notranslate">674</code></p>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
I expect webpack to bundle and chunk my files normally without throwing an error.</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  4.41.0<br>
Node.js version: v10.17.0<br>
Operating System: ubuntu<br>
Additional tools:</p>
<p dir="auto">I'm trying to bundle all my monaco-editor dependencies to a separate chunk inside my webpack config.</p>
<p dir="auto">Right now I'm doing is by using the cacheGroups feature of webpack:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="splitChunks: {
        chunks: &quot;all&quot;,
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vendor: {
            test: /[\\/](monaco-editor)[\\/]/,
            name: &quot;monaco-editor&quot;
          }
        }
},"><pre class="notranslate"><span class="pl-s1">splitChunks</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">chunks</span>: <span class="pl-s">"all"</span><span class="pl-kos">,</span>
        <span class="pl-c1">maxInitialRequests</span>: <span class="pl-v">Infinity</span><span class="pl-kos">,</span>
        <span class="pl-c1">minSize</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
        <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">vendor</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-kos">[</span><span class="pl-cce">\\</span>/<span class="pl-kos">]</span><span class="pl-kos">(</span>monaco-editor<span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-cce">\\</span>/<span class="pl-kos">]</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
            <span class="pl-c1">name</span>: <span class="pl-s">"monaco-editor"</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div>
<p dir="auto">I've created a little sample project which contains this bug. Feel free to try it out :)</p>
<p dir="auto"><a href="https://github.com/microsoft/monaco-editor-webpack-plugin/files/3864460/my-app.zip">my-app.zip</a></p>
<p dir="auto">My config:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;use strict&quot;;

const fs = require(&quot;fs&quot;);
const isWsl = require(&quot;is-wsl&quot;);
const path = require(&quot;path&quot;);
const webpack = require(&quot;webpack&quot;);
const resolve = require(&quot;resolve&quot;);
const PnpWebpackPlugin = require(&quot;pnp-webpack-plugin&quot;);
const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
const CaseSensitivePathsPlugin = require(&quot;case-sensitive-paths-webpack-plugin&quot;);
const InlineChunkHtmlPlugin = require(&quot;react-dev-utils/InlineChunkHtmlPlugin&quot;);
const TerserPlugin = require(&quot;terser-webpack-plugin&quot;);
const MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;);
const OptimizeCSSAssetsPlugin = require(&quot;optimize-css-assets-webpack-plugin&quot;);
const safePostCssParser = require(&quot;postcss-safe-parser&quot;);
const ManifestPlugin = require(&quot;webpack-manifest-plugin&quot;);
const InterpolateHtmlPlugin = require(&quot;react-dev-utils/InterpolateHtmlPlugin&quot;);
const WorkboxWebpackPlugin = require(&quot;workbox-webpack-plugin&quot;);
const WatchMissingNodeModulesPlugin = require(&quot;react-dev-utils/WatchMissingNodeModulesPlugin&quot;);
const ModuleScopePlugin = require(&quot;react-dev-utils/ModuleScopePlugin&quot;);
const getCSSModuleLocalIdent = require(&quot;react-dev-utils/getCSSModuleLocalIdent&quot;);
const paths = require(&quot;./paths&quot;);
const modules = require(&quot;./modules&quot;);
const getClientEnvironment = require(&quot;./env&quot;);
const ModuleNotFoundPlugin = require(&quot;react-dev-utils/ModuleNotFoundPlugin&quot;);
const ForkTsCheckerWebpackPlugin = require(&quot;react-dev-utils/ForkTsCheckerWebpackPlugin&quot;);
const typescriptFormatter = require(&quot;react-dev-utils/typescriptFormatter&quot;);
const eslint = require(&quot;eslint&quot;);
const BundleAnalyzerPlugin = require(&quot;webpack-bundle-analyzer&quot;)
  .BundleAnalyzerPlugin;

const MonacoWebpackPlugin = require(&quot;monaco-editor-webpack-plugin&quot;);

const postcssNormalize = require(&quot;postcss-normalize&quot;);

const appPackageJson = require(paths.appPackageJson);

// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== &quot;false&quot;;
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== &quot;false&quot;;

const imageInlineSizeLimit = parseInt(
  process.env.IMAGE_INLINE_SIZE_LIMIT || &quot;10000&quot;
);

// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
  const isEnvDevelopment = webpackEnv === &quot;development&quot;;
  const isEnvProduction = webpackEnv === &quot;production&quot;;

  // Variable used for enabling profiling in Production
  // passed into alias object. Uses a flag if passed into the build command
  const isEnvProductionProfile =
    isEnvProduction &amp;&amp; process.argv.includes(&quot;--profile&quot;);

  // 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.
  // In development, we always serve from the root. This makes config easier.
  const publicPath = isEnvProduction
    ? paths.servedPath
    : isEnvDevelopment &amp;&amp; &quot;/&quot;;
  // Some apps do not use client-side routing with pushState.
  // For these, &quot;homepage&quot; can be set to &quot;.&quot; to enable relative asset paths.
  const shouldUseRelativeAssetPaths = publicPath === &quot;./&quot;;

  // `publicUrl` is just like `publicPath`, but we will provide it 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.
  const publicUrl = isEnvProduction
    ? publicPath.slice(0, -1)
    : isEnvDevelopment &amp;&amp; &quot;&quot;;
  // Get environment variables to inject into our app.
  const env = getClientEnvironment(publicUrl);

  // common function to get style loaders
  const getStyleLoaders = (cssOptions, preProcessor) =&gt; {
    const loaders = [
      isEnvDevelopment &amp;&amp; require.resolve(&quot;style-loader&quot;),
      isEnvProduction &amp;&amp; {
        loader: MiniCssExtractPlugin.loader,
        options: shouldUseRelativeAssetPaths ? { publicPath: &quot;../../&quot; } : {}
      },
      {
        loader: require.resolve(&quot;css-loader&quot;),
        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(&quot;postcss-loader&quot;),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: &quot;postcss&quot;,
          plugins: () =&gt; [
            require(&quot;postcss-flexbugs-fixes&quot;),
            require(&quot;postcss-preset-env&quot;)({
              autoprefixer: {
                flexbox: &quot;no-2009&quot;
              },
              stage: 3
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            postcssNormalize()
          ],
          sourceMap: isEnvProduction &amp;&amp; shouldUseSourceMap
        }
      }
    ].filter(Boolean);
    if (preProcessor) {
      loaders.push(
        {
          loader: require.resolve(&quot;resolve-url-loader&quot;),
          options: {
            sourceMap: isEnvProduction &amp;&amp; shouldUseSourceMap
          }
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true
          }
        }
      );
    }
    return loaders;
  };

  return {
    mode: isEnvProduction ? &quot;production&quot; : isEnvDevelopment &amp;&amp; &quot;development&quot;,
    // Stop compilation early in production
    bail: isEnvProduction,
    devtool: isEnvProduction
      ? shouldUseSourceMap
        ? &quot;source-map&quot;
        : false
      : isEnvDevelopment &amp;&amp; &quot;cheap-module-source-map&quot;,
    // These are the &quot;entry points&quot; to our application.
    // This means they will be the &quot;root&quot; imports that are included in JS bundle.
    entry: [
      // 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'),
      isEnvDevelopment &amp;&amp;
        require.resolve(&quot;react-dev-utils/webpackHotDevClient&quot;),
      // 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.
    ].filter(Boolean),
    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
        ? &quot;static/js/[name].[contenthash:8].js&quot;
        : isEnvDevelopment &amp;&amp; &quot;static/js/bundle.js&quot;,
      // TODO: remove this when upgrading to webpack 5
      futureEmitAssets: true,
      // There are also additional JS chunk files if you use code splitting.
      chunkFilename: isEnvProduction
        ? &quot;static/js/[name].[contenthash:8].chunk.js&quot;
        : isEnvDevelopment &amp;&amp; &quot;static/js/[name].chunk.js&quot;,
      // We inferred the &quot;public path&quot; (such as / or /my-project) from homepage.
      // We use &quot;/&quot; in development.
      publicPath: publicPath,
      // Point sourcemap entries to original disk location (format as URL on Windows)
      devtoolModuleFilenameTemplate: isEnvProduction
        ? info =&gt;
            path
              .relative(paths.appSrc, info.absoluteResourcePath)
              .replace(/\\/g, &quot;/&quot;)
        : isEnvDevelopment &amp;&amp;
          (info =&gt; path.resolve(info.absoluteResourcePath).replace(/\\/g, &quot;/&quot;)),
      // Prevents conflicts when multiple Webpack runtimes (from different apps)
      // are used on the same page.
      jsonpFunction: `webpackJsonp${appPackageJson.name}`,
      // this defaults to 'window', but by setting it to 'this' then
      // module chunks which are built will work in web workers as well.
      globalObject: &quot;this&quot;
    },
    optimization: {
      minimize: isEnvProduction,
      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
            }
          },
          // Use multi-process parallel running to improve the build speed
          // Default number of concurrent runs: os.cpus().length - 1
          // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
          // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
          parallel: !isWsl,
          // Enable file caching
          cache: true,
          sourceMap: shouldUseSourceMap
        }),
        // This is only used in production mode
        new OptimizeCSSAssetsPlugin({
          cssProcessorOptions: {
            parser: safePostCssParser,
            map: shouldUseSourceMap
              ? {
                  // `inline: false` forces the sourcemap to be output into a
                  // separate file
                  inline: false,
                  // `annotation: true` appends the sourceMappingURL to the end of
                  // the css file, helping the browser find the sourcemap
                  annotation: true
                }
              : 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: &quot;all&quot;,
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vendor: {
            test: /[\\/](monaco-editor)[\\/]/,
            name: &quot;monaco-editor&quot;
          }
        }
      },
      // 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 =&gt; `runtime-${entrypoint.name}`
      }
    },
    resolve: {
      // 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 &quot;win&quot;
      // if there are any conflicts. This matches Node resolution mechanism.
      // https://github.com/facebook/create-react-app/issues/253
      modules: [&quot;node_modules&quot;, paths.appNodeModules].concat(
        modules.additionalModulePaths || []
      ),
      // These are the reasonable defaults supported by the Node ecosystem.
      // We also include JSX as a common component filename extension to support
      // some tools, although we do not recommend using it, see:
      // https://github.com/facebook/create-react-app/issues/290
      // `web` extension prefixes have been added for better support
      // for React Native Web.
      extensions: paths.moduleFileExtensions
        .map(ext =&gt; `.${ext}`)
        .filter(ext =&gt; useTypeScript || !ext.includes(&quot;ts&quot;)),
      alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        &quot;react-native&quot;: &quot;react-native-web&quot;,
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile &amp;&amp; {
          &quot;react-dom$&quot;: &quot;react-dom/profiling&quot;,
          &quot;scheduler/tracing&quot;: &quot;scheduler/tracing-profiling&quot;
        }),
        ...(modules.webpackAliases || {})
      },
      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])
      ]
    },
    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: {
      strictExportPresence: true,
      rules: [
        // Disable require.ensure as it's not a standard language feature.
        { parser: { requireEnsure: false } },

        // First, run the linter.
        // It's important to do this before Babel processes the JS.
        {
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          enforce: &quot;pre&quot;,
          use: [
            {
              options: {
                cache: true,
                formatter: require.resolve(&quot;react-dev-utils/eslintFormatter&quot;),
                eslintPath: require.resolve(&quot;eslint&quot;),
                resolvePluginsRelativeTo: __dirname
              },
              loader: require.resolve(&quot;eslint-loader&quot;)
            }
          ],
          include: paths.appSrc
        },
        {
          // &quot;oneOf&quot; will traverse all following loaders until one will
          // match the requirements. When no loader matches it will fall
          // back to the &quot;file&quot; loader at the end of the loader list.
          oneOf: [
            // &quot;url&quot; loader works like &quot;file&quot; loader except that it embeds assets
            // smaller than specified limit in bytes as data URLs to avoid requests.
            // A missing `test` is equivalent to a match.
            {
              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
              loader: require.resolve(&quot;url-loader&quot;),
              options: {
                limit: imageInlineSizeLimit,
                name: &quot;static/media/[name].[hash:8].[ext]&quot;
              }
            },
            // Process application JS with Babel.
            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
            {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve(&quot;babel-loader&quot;),
              options: {
                customize: require.resolve(
                  &quot;babel-preset-react-app/webpack-overrides&quot;
                ),

                plugins: [
                  [
                    require.resolve(&quot;babel-plugin-named-asset-import&quot;),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent:
                            &quot;@svgr/webpack?-svgo,+titleProp,+ref![path]&quot;
                        }
                      }
                    }
                  ]
                ],
                // This is a feature of `babel-loader` for webpack (not Babel itself).
                // It enables caching results in ./node_modules/.cache/babel-loader/
                // directory for faster rebuilds.
                cacheDirectory: true,
                // See #6846 for context on why cacheCompression is disabled
                cacheCompression: false,
                compact: isEnvProduction
              }
            },
            // Process any JS outside of the app with Babel.
            // Unlike the application JS, we only compile the standard ES features.
            {
              test: /\.(js|mjs)$/,
              exclude: /@babel(?:\/|\\{1,2})runtime/,
              loader: require.resolve(&quot;babel-loader&quot;),
              options: {
                babelrc: false,
                configFile: false,
                compact: false,
                presets: [
                  [
                    require.resolve(&quot;babel-preset-react-app/dependencies&quot;),
                    { helpers: true }
                  ]
                ],
                cacheDirectory: true,
                // See #6846 for context on why cacheCompression is disabled
                cacheCompression: false,

                // If an error happens in a package, it's possible to be
                // because it was compiled. Thus, we don't want the browser
                // debugger to show the original code. Instead, the code
                // being evaluated would be much more helpful.
                sourceMaps: false
              }
            },
            // &quot;postcss&quot; loader applies autoprefixer to our CSS.
            // &quot;css&quot; loader resolves paths in CSS and adds assets as dependencies.
            // &quot;style&quot; loader turns CSS into JS modules that inject &lt;style&gt; tags.
            // In production, we use MiniCSSExtractPlugin to extract that CSS
            // to a file, but in development &quot;style&quot; 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 &amp;&amp; shouldUseSourceMap
              }),
              // 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 &amp;&amp; shouldUseSourceMap,
                modules: true,
                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: 2,
                  sourceMap: isEnvProduction &amp;&amp; shouldUseSourceMap
                },
                &quot;sass-loader&quot;
              ),
              // 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: 2,
                  sourceMap: isEnvProduction &amp;&amp; shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                &quot;sass-loader&quot;
              )
            },
            // &quot;file&quot; 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 &quot;test&quot; so it will catch all modules
            // that fall through the other loaders.
            {
              loader: require.resolve(&quot;file-loader&quot;),
              // Exclude `js` files to keep &quot;css&quot; loader working as it injects
              // its runtime that would otherwise be processed through &quot;file&quot; 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: &quot;static/media/[name].[hash:8].[ext]&quot;
              }
            }
            // ** STOP ** Are you adding a new loader?
            // Make sure to add the new loader(s) before the &quot;file&quot; loader.
          ]
        }
      ]
    },
    plugins: [
      // Generates an `index.html` file with the &lt;script&gt; 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 &amp;&amp;
        shouldInlineRuntimeChunk &amp;&amp;
        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.:
      // &lt;link rel=&quot;icon&quot; href=&quot;%PUBLIC_URL%/favicon.ico&quot;&gt;
      // In production, it will be an empty string unless you specify &quot;homepage&quot;
      // in `package.json`, in which case it will be the pathname of that URL.
      // In development, this will be an empty string.
      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 (currently CSS only):
      isEnvDevelopment &amp;&amp; new webpack.HotModuleReplacementPlugin(),
      // 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 &amp;&amp; new CaseSensitivePathsPlugin(),
      // If you require a missing module and then `npm install` it, you still have
      // to restart the development server for Webpack to discover it. This plugin
      // makes the discovery automatic so you don't have to restart.
      // See https://github.com/facebook/create-react-app/issues/186
      isEnvDevelopment &amp;&amp;
        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
      isEnvProduction &amp;&amp;
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: &quot;static/css/[name].[contenthash:8].css&quot;,
          chunkFilename: &quot;static/css/[name].[contenthash:8].chunk.css&quot;
        }),
      // Generate an asset manifest file with the following content:
      // - &quot;files&quot; key: Mapping of all asset filenames to their corresponding
      //   output file so that tools can pick it up without having to parse
      //   `index.html`
      // - &quot;entrypoints&quot; key: Array of files which are included in `index.html`,
      //   can be used to reconstruct the HTML if necessary
      new ManifestPlugin({
        fileName: &quot;asset-manifest.json&quot;,
        publicPath: publicPath,
        generate: (seed, files, entrypoints) =&gt; {
          const manifestFiles = files.reduce((manifest, file) =&gt; {
            manifest[file.name] = file.path;
            return manifest;
          }, seed);
          const entrypointFiles = entrypoints.main.filter(
            fileName =&gt; !fileName.endsWith(&quot;.map&quot;)
          );

          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(/^\.\/locale$/, /moment$/),
      // Generate a service worker script that will precache, and keep up to date,
      // the HTML &amp; assets that are part of the Webpack build.
      isEnvProduction &amp;&amp;
        new WorkboxWebpackPlugin.GenerateSW({
          clientsClaim: true,
          exclude: [/\.map$/, /asset-manifest\.json$/],
          importWorkboxFrom: &quot;cdn&quot;,
          navigateFallback: publicUrl + &quot;/index.html&quot;,
          navigateFallbackBlacklist: [
            // Exclude URLs starting with /_, as they're likely an API call
            new RegExp(&quot;^/_&quot;),
            // Exclude any URLs whose last part seems to be a file extension
            // as they're likely a resource and not a SPA route.
            // URLs containing a &quot;?&quot; character won't be blacklisted as they're likely
            // a route with query params (e.g. auth callbacks).
            new RegExp(&quot;/[^/?]+\\.[^/]+$&quot;)
          ]
        }),
      // TypeScript type checking
      useTypeScript &amp;&amp;
        new ForkTsCheckerWebpackPlugin({
          typescript: resolve.sync(&quot;typescript&quot;, {
            basedir: paths.appNodeModules
          }),
          async: isEnvDevelopment,
          useTypescriptIncrementalApi: true,
          checkSyntacticErrors: true,
          resolveModuleNameModule: process.versions.pnp
            ? `${__dirname}/pnpTs.js`
            : undefined,
          resolveTypeReferenceDirectiveModule: process.versions.pnp
            ? `${__dirname}/pnpTs.js`
            : undefined,
          tsconfig: paths.appTsConfig,
          reportFiles: [
            &quot;**&quot;,
            &quot;!**/__tests__/**&quot;,
            &quot;!**/?(*.)(spec|test).*&quot;,
            &quot;!**/src/setupProxy.*&quot;,
            &quot;!**/src/setupTests.*&quot;
          ],
          silent: true,
          // The formatter is invoked directly in WebpackDevServerUtils during development
          formatter: isEnvProduction ? typescriptFormatter : undefined
        }),
      // THIS BREAKS THE BUILD WHEN USING contenthash
      new MonacoWebpackPlugin()
      // new BundleAnalyzerPlugin()
    ].filter(Boolean),
    // Some libraries import Node modules but don't use them in the browser.
    // Tell Webpack to provide empty mocks for them so importing them works.
    node: {
      module: &quot;empty&quot;,
      dgram: &quot;empty&quot;,
      dns: &quot;mock&quot;,
      fs: &quot;empty&quot;,
      http2: &quot;empty&quot;,
      net: &quot;empty&quot;,
      tls: &quot;empty&quot;,
      child_process: &quot;empty&quot;
    },
    // Turn off performance processing because we utilize
    // our own hints via the FileSizeReporter
    performance: false
  };
};"><pre class="notranslate"><span class="pl-s">"use strict"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">fs</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"fs"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">isWsl</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"is-wsl"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"path"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">webpack</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"webpack"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">resolve</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"resolve"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">PnpWebpackPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"pnp-webpack-plugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">HtmlWebpackPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"html-webpack-plugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">CaseSensitivePathsPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"case-sensitive-paths-webpack-plugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">InlineChunkHtmlPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"react-dev-utils/InlineChunkHtmlPlugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">TerserPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"terser-webpack-plugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">MiniCssExtractPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"mini-css-extract-plugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">OptimizeCSSAssetsPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"optimize-css-assets-webpack-plugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">safePostCssParser</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"postcss-safe-parser"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">ManifestPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"webpack-manifest-plugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">InterpolateHtmlPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"react-dev-utils/InterpolateHtmlPlugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">WorkboxWebpackPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"workbox-webpack-plugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">WatchMissingNodeModulesPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"react-dev-utils/WatchMissingNodeModulesPlugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">ModuleScopePlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"react-dev-utils/ModuleScopePlugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">getCSSModuleLocalIdent</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"react-dev-utils/getCSSModuleLocalIdent"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">paths</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"./paths"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">modules</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"./modules"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">getClientEnvironment</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"./env"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">ModuleNotFoundPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"react-dev-utils/ModuleNotFoundPlugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">ForkTsCheckerWebpackPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"react-dev-utils/ForkTsCheckerWebpackPlugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">typescriptFormatter</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"react-dev-utils/typescriptFormatter"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">eslint</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"eslint"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">BundleAnalyzerPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"webpack-bundle-analyzer"</span><span class="pl-kos">)</span>
  <span class="pl-kos">.</span><span class="pl-c1">BundleAnalyzerPlugin</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">MonacoWebpackPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"monaco-editor-webpack-plugin"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">postcssNormalize</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"postcss-normalize"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">appPackageJson</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appPackageJson</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// Source maps are resource heavy and can cause out of memory issue for large source files.</span>
<span class="pl-k">const</span> <span class="pl-s1">shouldUseSourceMap</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">GENERATE_SOURCEMAP</span> <span class="pl-c1">!==</span> <span class="pl-s">"false"</span><span class="pl-kos">;</span>
<span class="pl-c">// Some apps do not need the benefits of saving a web request, so not inlining the chunk</span>
<span class="pl-c">// makes for a smoother build process.</span>
<span class="pl-k">const</span> <span class="pl-s1">shouldInlineRuntimeChunk</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">INLINE_RUNTIME_CHUNK</span> <span class="pl-c1">!==</span> <span class="pl-s">"false"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">imageInlineSizeLimit</span> <span class="pl-c1">=</span> <span class="pl-en">parseInt</span><span class="pl-kos">(</span>
  <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">IMAGE_INLINE_SIZE_LIMIT</span> <span class="pl-c1">||</span> <span class="pl-s">"10000"</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// Check if TypeScript is setup</span>
<span class="pl-k">const</span> <span class="pl-s1">useTypeScript</span> <span class="pl-c1">=</span> <span class="pl-s1">fs</span><span class="pl-kos">.</span><span class="pl-en">existsSync</span><span class="pl-kos">(</span><span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appTsConfig</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// style files regexes</span>
<span class="pl-k">const</span> <span class="pl-s1">cssRegex</span> <span class="pl-c1">=</span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>css<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">cssModuleRegex</span> <span class="pl-c1">=</span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>module<span class="pl-cce">\.</span>css<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">sassRegex</span> <span class="pl-c1">=</span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>scss<span class="pl-c1">|</span>sass<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">sassModuleRegex</span> <span class="pl-c1">=</span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>module<span class="pl-cce">\.</span><span class="pl-kos">(</span>scss<span class="pl-c1">|</span>sass<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">;</span>

<span class="pl-c">// This is the production and development configuration.</span>
<span class="pl-c">// It is focused on developer experience, fast rebuilds, and a minimal bundle.</span>
<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-en">exports</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">webpackEnv</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">=</span> <span class="pl-s1">webpackEnv</span> <span class="pl-c1">===</span> <span class="pl-s">"development"</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">isEnvProduction</span> <span class="pl-c1">=</span> <span class="pl-s1">webpackEnv</span> <span class="pl-c1">===</span> <span class="pl-s">"production"</span><span class="pl-kos">;</span>

  <span class="pl-c">// Variable used for enabling profiling in Production</span>
  <span class="pl-c">// passed into alias object. Uses a flag if passed into the build command</span>
  <span class="pl-k">const</span> <span class="pl-s1">isEnvProductionProfile</span> <span class="pl-c1">=</span>
    <span class="pl-s1">isEnvProduction</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">argv</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">"--profile"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-c">// Webpack uses `publicPath` to determine where the app is being served from.</span>
  <span class="pl-c">// It requires a trailing slash, or the file assets will get an incorrect path.</span>
  <span class="pl-c">// In development, we always serve from the root. This makes config easier.</span>
  <span class="pl-k">const</span> <span class="pl-s1">publicPath</span> <span class="pl-c1">=</span> <span class="pl-s1">isEnvProduction</span>
    ? <span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">servedPath</span>
    : <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s">"/"</span><span class="pl-kos">;</span>
  <span class="pl-c">// Some apps do not use client-side routing with pushState.</span>
  <span class="pl-c">// For these, "homepage" can be set to "." to enable relative asset paths.</span>
  <span class="pl-k">const</span> <span class="pl-s1">shouldUseRelativeAssetPaths</span> <span class="pl-c1">=</span> <span class="pl-s1">publicPath</span> <span class="pl-c1">===</span> <span class="pl-s">"./"</span><span class="pl-kos">;</span>

  <span class="pl-c">// `publicUrl` is just like `publicPath`, but we will provide it to our app</span>
  <span class="pl-c">// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.</span>
  <span class="pl-c">// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.</span>
  <span class="pl-k">const</span> <span class="pl-s1">publicUrl</span> <span class="pl-c1">=</span> <span class="pl-s1">isEnvProduction</span>
    ? <span class="pl-s1">publicPath</span><span class="pl-kos">.</span><span class="pl-en">slice</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">)</span>
    : <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s">""</span><span class="pl-kos">;</span>
  <span class="pl-c">// Get environment variables to inject into our app.</span>
  <span class="pl-k">const</span> <span class="pl-s1">env</span> <span class="pl-c1">=</span> <span class="pl-s1">getClientEnvironment</span><span class="pl-kos">(</span><span class="pl-s1">publicUrl</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-c">// common function to get style loaders</span>
  <span class="pl-k">const</span> <span class="pl-en">getStyleLoaders</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">cssOptions</span><span class="pl-kos">,</span> <span class="pl-s1">preProcessor</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">loaders</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
      <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"style-loader"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-s1">isEnvProduction</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-kos">{</span>
        <span class="pl-c1">loader</span>: <span class="pl-v">MiniCssExtractPlugin</span><span class="pl-kos">.</span><span class="pl-c1">loader</span><span class="pl-kos">,</span>
        <span class="pl-c1">options</span>: <span class="pl-s1">shouldUseRelativeAssetPaths</span> ? <span class="pl-kos">{</span> <span class="pl-c1">publicPath</span>: <span class="pl-s">"../../"</span> <span class="pl-kos">}</span> : <span class="pl-kos">{</span><span class="pl-kos">}</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">loader</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"css-loader"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-c1">options</span>: <span class="pl-s1">cssOptions</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c">// Options for PostCSS as we reference these options twice</span>
        <span class="pl-c">// Adds vendor prefixing based on your specified browser support in</span>
        <span class="pl-c">// package.json</span>
        <span class="pl-c1">loader</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"postcss-loader"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
          <span class="pl-c">// Necessary for external CSS imports to work</span>
          <span class="pl-c">// https://github.com/facebook/create-react-app/issues/2677</span>
          <span class="pl-c1">ident</span>: <span class="pl-s">"postcss"</span><span class="pl-kos">,</span>
          <span class="pl-en">plugins</span>: <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">[</span>
            <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"postcss-flexbugs-fixes"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
            <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"postcss-preset-env"</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
              <span class="pl-c1">autoprefixer</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">flexbox</span>: <span class="pl-s">"no-2009"</span>
              <span class="pl-kos">}</span><span class="pl-kos">,</span>
              <span class="pl-c1">stage</span>: <span class="pl-c1">3</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
            <span class="pl-c">// Adds PostCSS Normalize as the reset css with default options,</span>
            <span class="pl-c">// so that it honors browserslist config in package.json</span>
            <span class="pl-c">// which in turn let's users customize the target behavior as per their needs.</span>
            <span class="pl-s1">postcssNormalize</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
          <span class="pl-kos">]</span><span class="pl-kos">,</span>
          <span class="pl-c1">sourceMap</span>: <span class="pl-s1">isEnvProduction</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">shouldUseSourceMap</span>
        <span class="pl-kos">}</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span><span class="pl-v">Boolean</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">preProcessor</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">loaders</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span>
        <span class="pl-kos">{</span>
          <span class="pl-c1">loader</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"resolve-url-loader"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
          <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">sourceMap</span>: <span class="pl-s1">isEnvProduction</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">shouldUseSourceMap</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-kos">{</span>
          <span class="pl-c1">loader</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">preProcessor</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
          <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">sourceMap</span>: <span class="pl-c1">true</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">}</span>
      <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">return</span> <span class="pl-s1">loaders</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>

  <span class="pl-k">return</span> <span class="pl-kos">{</span>
    <span class="pl-c1">mode</span>: <span class="pl-s1">isEnvProduction</span> ? <span class="pl-s">"production"</span> : <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s">"development"</span><span class="pl-kos">,</span>
    <span class="pl-c">// Stop compilation early in production</span>
    <span class="pl-c1">bail</span>: <span class="pl-s1">isEnvProduction</span><span class="pl-kos">,</span>
    <span class="pl-c1">devtool</span>: <span class="pl-s1">isEnvProduction</span>
      ? <span class="pl-s1">shouldUseSourceMap</span>
        ? <span class="pl-s">"source-map"</span>
        : <span class="pl-c1">false</span>
      : <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s">"cheap-module-source-map"</span><span class="pl-kos">,</span>
    <span class="pl-c">// These are the "entry points" to our application.</span>
    <span class="pl-c">// This means they will be the "root" imports that are included in JS bundle.</span>
    <span class="pl-c1">entry</span>: <span class="pl-kos">[</span>
      <span class="pl-c">// Include an alternative client for WebpackDevServer. A client's job is to</span>
      <span class="pl-c">// connect to WebpackDevServer by a socket and get notified about changes.</span>
      <span class="pl-c">// When you save a file, the client will either apply hot updates (in case</span>
      <span class="pl-c">// of CSS changes), or refresh the page (in case of JS changes). When you</span>
      <span class="pl-c">// make a syntax error, this client will display a syntax error overlay.</span>
      <span class="pl-c">// Note: instead of the default WebpackDevServer client, we use a custom one</span>
      <span class="pl-c">// to bring better experience for Create React App users. You can replace</span>
      <span class="pl-c">// the line below with these two lines if you prefer the stock client:</span>
      <span class="pl-c">// require.resolve('webpack-dev-server/client') + '?/',</span>
      <span class="pl-c">// require.resolve('webpack/hot/dev-server'),</span>
      <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">&amp;&amp;</span>
        <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"react-dev-utils/webpackHotDevClient"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// Finally, this is your app's code:</span>
      <span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appIndexJs</span>
      <span class="pl-c">// We include the app code last so that if there is a runtime error during</span>
      <span class="pl-c">// initialization, it doesn't blow up the WebpackDevServer client, and</span>
      <span class="pl-c">// changing JS code would still trigger a refresh.</span>
    <span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span><span class="pl-v">Boolean</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
      <span class="pl-c">// The build folder.</span>
      <span class="pl-c1">path</span>: <span class="pl-s1">isEnvProduction</span> ? <span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appBuild</span> : <span class="pl-c1">undefined</span><span class="pl-kos">,</span>
      <span class="pl-c">// Add /* filename */ comments to generated require()s in the output.</span>
      <span class="pl-c1">pathinfo</span>: <span class="pl-s1">isEnvDevelopment</span><span class="pl-kos">,</span>
      <span class="pl-c">// There will be one main bundle, and one file per asynchronous chunk.</span>
      <span class="pl-c">// In development, it does not produce real files.</span>
      <span class="pl-c1">filename</span>: <span class="pl-s1">isEnvProduction</span>
        ? <span class="pl-s">"static/js/[name].[contenthash:8].js"</span>
        : <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s">"static/js/bundle.js"</span><span class="pl-kos">,</span>
      <span class="pl-c">// TODO: remove this when upgrading to webpack 5</span>
      <span class="pl-c1">futureEmitAssets</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
      <span class="pl-c">// There are also additional JS chunk files if you use code splitting.</span>
      <span class="pl-c1">chunkFilename</span>: <span class="pl-s1">isEnvProduction</span>
        ? <span class="pl-s">"static/js/[name].[contenthash:8].chunk.js"</span>
        : <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s">"static/js/[name].chunk.js"</span><span class="pl-kos">,</span>
      <span class="pl-c">// We inferred the "public path" (such as / or /my-project) from homepage.</span>
      <span class="pl-c">// We use "/" in development.</span>
      <span class="pl-c1">publicPath</span>: <span class="pl-s1">publicPath</span><span class="pl-kos">,</span>
      <span class="pl-c">// Point sourcemap entries to original disk location (format as URL on Windows)</span>
      <span class="pl-c1">devtoolModuleFilenameTemplate</span>: <span class="pl-s1">isEnvProduction</span>
        ? <span class="pl-s1">info</span> <span class="pl-c1">=&gt;</span>
            <span class="pl-s1">path</span>
              <span class="pl-kos">.</span><span class="pl-en">relative</span><span class="pl-kos">(</span><span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appSrc</span><span class="pl-kos">,</span> <span class="pl-s1">info</span><span class="pl-kos">.</span><span class="pl-c1">absoluteResourcePath</span><span class="pl-kos">)</span>
              <span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\\</span><span class="pl-c1">/</span>g</span><span class="pl-kos">,</span> <span class="pl-s">"/"</span><span class="pl-kos">)</span>
        : <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">&amp;&amp;</span>
          <span class="pl-kos">(</span><span class="pl-s1">info</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">info</span><span class="pl-kos">.</span><span class="pl-c1">absoluteResourcePath</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\\</span><span class="pl-c1">/</span>g</span><span class="pl-kos">,</span> <span class="pl-s">"/"</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// Prevents conflicts when multiple Webpack runtimes (from different apps)</span>
      <span class="pl-c">// are used on the same page.</span>
      <span class="pl-c1">jsonpFunction</span>: <span class="pl-s">`webpackJsonp<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">appPackageJson</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">,</span>
      <span class="pl-c">// this defaults to 'window', but by setting it to 'this' then</span>
      <span class="pl-c">// module chunks which are built will work in web workers as well.</span>
      <span class="pl-c1">globalObject</span>: <span class="pl-s">"this"</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">optimization</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">minimize</span>: <span class="pl-s1">isEnvProduction</span><span class="pl-kos">,</span>
      <span class="pl-c1">minimizer</span>: <span class="pl-kos">[</span>
        <span class="pl-c">// This is only used in production mode</span>
        <span class="pl-k">new</span> <span class="pl-v">TerserPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
          <span class="pl-c1">terserOptions</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">parse</span>: <span class="pl-kos">{</span>
              <span class="pl-c">// We want terser to parse ecma 8 code. However, we don't want it</span>
              <span class="pl-c">// to apply any minification steps that turns valid ecma 5 code</span>
              <span class="pl-c">// into invalid ecma 5 code. This is why the 'compress' and 'output'</span>
              <span class="pl-c">// sections only apply transformations that are ecma 5 safe</span>
              <span class="pl-c">// https://github.com/facebook/create-react-app/pull/4234</span>
              <span class="pl-c1">ecma</span>: <span class="pl-c1">8</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c1">compress</span>: <span class="pl-kos">{</span>
              <span class="pl-c1">ecma</span>: <span class="pl-c1">5</span><span class="pl-kos">,</span>
              <span class="pl-c1">warnings</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
              <span class="pl-c">// Disabled because of an issue with Uglify breaking seemingly valid code:</span>
              <span class="pl-c">// https://github.com/facebook/create-react-app/issues/2376</span>
              <span class="pl-c">// Pending further investigation:</span>
              <span class="pl-c">// https://github.com/mishoo/UglifyJS2/issues/2011</span>
              <span class="pl-c1">comparisons</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
              <span class="pl-c">// Disabled because of an issue with Terser breaking valid code:</span>
              <span class="pl-c">// https://github.com/facebook/create-react-app/issues/5250</span>
              <span class="pl-c">// Pending further investigation:</span>
              <span class="pl-c">// https://github.com/terser-js/terser/issues/120</span>
              <span class="pl-c1">inline</span>: <span class="pl-c1">2</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c1">mangle</span>: <span class="pl-kos">{</span>
              <span class="pl-c1">safari10</span>: <span class="pl-c1">true</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c">// Added for profiling in devtools</span>
            <span class="pl-c1">keep_classnames</span>: <span class="pl-s1">isEnvProductionProfile</span><span class="pl-kos">,</span>
            <span class="pl-c1">keep_fnames</span>: <span class="pl-s1">isEnvProductionProfile</span><span class="pl-kos">,</span>
            <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
              <span class="pl-c1">ecma</span>: <span class="pl-c1">5</span><span class="pl-kos">,</span>
              <span class="pl-c1">comments</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
              <span class="pl-c">// Turned on because emoji and regex is not minified properly using default</span>
              <span class="pl-c">// https://github.com/facebook/create-react-app/issues/2488</span>
              <span class="pl-c1">ascii_only</span>: <span class="pl-c1">true</span>
            <span class="pl-kos">}</span>
          <span class="pl-kos">}</span><span class="pl-kos">,</span>
          <span class="pl-c">// Use multi-process parallel running to improve the build speed</span>
          <span class="pl-c">// Default number of concurrent runs: os.cpus().length - 1</span>
          <span class="pl-c">// Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser</span>
          <span class="pl-c">// https://github.com/webpack-contrib/terser-webpack-plugin/issues/21</span>
          <span class="pl-c1">parallel</span>: <span class="pl-c1">!</span><span class="pl-s1">isWsl</span><span class="pl-kos">,</span>
          <span class="pl-c">// Enable file caching</span>
          <span class="pl-c1">cache</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
          <span class="pl-c1">sourceMap</span>: <span class="pl-s1">shouldUseSourceMap</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-c">// This is only used in production mode</span>
        <span class="pl-k">new</span> <span class="pl-v">OptimizeCSSAssetsPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
          <span class="pl-c1">cssProcessorOptions</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">parser</span>: <span class="pl-s1">safePostCssParser</span><span class="pl-kos">,</span>
            <span class="pl-c1">map</span>: <span class="pl-s1">shouldUseSourceMap</span>
              ? <span class="pl-kos">{</span>
                  <span class="pl-c">// `inline: false` forces the sourcemap to be output into a</span>
                  <span class="pl-c">// separate file</span>
                  <span class="pl-c1">inline</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
                  <span class="pl-c">// `annotation: true` appends the sourceMappingURL to the end of</span>
                  <span class="pl-c">// the css file, helping the browser find the sourcemap</span>
                  <span class="pl-c1">annotation</span>: <span class="pl-c1">true</span>
                <span class="pl-kos">}</span>
              : <span class="pl-c1">false</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span>
      <span class="pl-kos">]</span><span class="pl-kos">,</span>
      <span class="pl-c">// Automatically split vendor and commons</span>
      <span class="pl-c">// https://twitter.com/wSokra/status/969633336732905474</span>
      <span class="pl-c">// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366</span>
      <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">chunks</span>: <span class="pl-s">"all"</span><span class="pl-kos">,</span>
        <span class="pl-c1">maxInitialRequests</span>: <span class="pl-v">Infinity</span><span class="pl-kos">,</span>
        <span class="pl-c1">minSize</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
        <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">vendor</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-kos">[</span><span class="pl-cce">\\</span>/<span class="pl-kos">]</span><span class="pl-kos">(</span>monaco-editor<span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-cce">\\</span>/<span class="pl-kos">]</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
            <span class="pl-c1">name</span>: <span class="pl-s">"monaco-editor"</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">}</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-c">// Keep the runtime chunk separated to enable long term caching</span>
      <span class="pl-c">// https://twitter.com/wSokra/status/969679223278505985</span>
      <span class="pl-c">// https://github.com/facebook/create-react-app/issues/5358</span>
      <span class="pl-c1">runtimeChunk</span>: <span class="pl-kos">{</span>
        <span class="pl-en">name</span>: <span class="pl-s1">entrypoint</span> <span class="pl-c1">=&gt;</span> <span class="pl-s">`runtime-<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">entrypoint</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">}</span></span>`</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">resolve</span>: <span class="pl-kos">{</span>
      <span class="pl-c">// This allows you to set a fallback for where Webpack should look for modules.</span>
      <span class="pl-c">// We placed these paths second because we want `node_modules` to "win"</span>
      <span class="pl-c">// if there are any conflicts. This matches Node resolution mechanism.</span>
      <span class="pl-c">// https://github.com/facebook/create-react-app/issues/253</span>
      <span class="pl-c1">modules</span>: <span class="pl-kos">[</span><span class="pl-s">"node_modules"</span><span class="pl-kos">,</span> <span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appNodeModules</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">concat</span><span class="pl-kos">(</span>
        <span class="pl-s1">modules</span><span class="pl-kos">.</span><span class="pl-c1">additionalModulePaths</span> <span class="pl-c1">||</span> <span class="pl-kos">[</span><span class="pl-kos">]</span>
      <span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// These are the reasonable defaults supported by the Node ecosystem.</span>
      <span class="pl-c">// We also include JSX as a common component filename extension to support</span>
      <span class="pl-c">// some tools, although we do not recommend using it, see:</span>
      <span class="pl-c">// https://github.com/facebook/create-react-app/issues/290</span>
      <span class="pl-c">// `web` extension prefixes have been added for better support</span>
      <span class="pl-c">// for React Native Web.</span>
      <span class="pl-c1">extensions</span>: <span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">moduleFileExtensions</span>
        <span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">ext</span> <span class="pl-c1">=&gt;</span> <span class="pl-s">`.<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">ext</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span>
        <span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span><span class="pl-s1">ext</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">useTypeScript</span> <span class="pl-c1">||</span> <span class="pl-c1">!</span><span class="pl-s1">ext</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">"ts"</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c1">alias</span>: <span class="pl-kos">{</span>
        <span class="pl-c">// Support React Native Web</span>
        <span class="pl-c">// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/</span>
        <span class="pl-s">"react-native"</span>: <span class="pl-s">"react-native-web"</span><span class="pl-kos">,</span>
        <span class="pl-c">// Allows for better profiling with ReactDevTools</span>
        ...<span class="pl-kos">(</span><span class="pl-s1">isEnvProductionProfile</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-kos">{</span>
          <span class="pl-s">"react-dom$"</span>: <span class="pl-s">"react-dom/profiling"</span><span class="pl-kos">,</span>
          <span class="pl-s">"scheduler/tracing"</span>: <span class="pl-s">"scheduler/tracing-profiling"</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        ...<span class="pl-kos">(</span><span class="pl-s1">modules</span><span class="pl-kos">.</span><span class="pl-c1">webpackAliases</span> <span class="pl-c1">||</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
        <span class="pl-c">// Adds support for installing with Plug'n'Play, leading to faster installs and adding</span>
        <span class="pl-c">// guards against forgotten dependencies and such.</span>
        <span class="pl-v">PnpWebpackPlugin</span><span class="pl-kos">,</span>
        <span class="pl-c">// Prevents users from importing files from outside of src/ (or node_modules/).</span>
        <span class="pl-c">// This often causes confusion because we only process files within src/ with babel.</span>
        <span class="pl-c">// To fix this, we prevent you from importing files out of src/ -- if you'd like to,</span>
        <span class="pl-c">// please link the files into your node_modules/ and let module-resolution kick in.</span>
        <span class="pl-c">// Make sure your source files are compiled, as they will not be processed in any way.</span>
        <span class="pl-k">new</span> <span class="pl-v">ModuleScopePlugin</span><span class="pl-kos">(</span><span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appSrc</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appPackageJson</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
      <span class="pl-kos">]</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">resolveLoader</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
        <span class="pl-c">// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders</span>
        <span class="pl-c">// from the current package.</span>
        <span class="pl-v">PnpWebpackPlugin</span><span class="pl-kos">.</span><span class="pl-en">moduleLoader</span><span class="pl-kos">(</span><span class="pl-smi">module</span><span class="pl-kos">)</span>
      <span class="pl-kos">]</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">module</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">strictExportPresence</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
      <span class="pl-c1">rules</span>: <span class="pl-kos">[</span>
        <span class="pl-c">// Disable require.ensure as it's not a standard language feature.</span>
        <span class="pl-kos">{</span> <span class="pl-c1">parser</span>: <span class="pl-kos">{</span> <span class="pl-c1">requireEnsure</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>

        <span class="pl-c">// First, run the linter.</span>
        <span class="pl-c">// It's important to do this before Babel processes the JS.</span>
        <span class="pl-kos">{</span>
          <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>js<span class="pl-c1">|</span>mjs<span class="pl-c1">|</span>jsx<span class="pl-c1">|</span>ts<span class="pl-c1">|</span>tsx<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
          <span class="pl-c1">enforce</span>: <span class="pl-s">"pre"</span><span class="pl-kos">,</span>
          <span class="pl-c1">use</span>: <span class="pl-kos">[</span>
            <span class="pl-kos">{</span>
              <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">cache</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                <span class="pl-c1">formatter</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"react-dev-utils/eslintFormatter"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                <span class="pl-c1">eslintPath</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"eslint"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                <span class="pl-c1">resolvePluginsRelativeTo</span>: <span class="pl-s1">__dirname</span>
              <span class="pl-kos">}</span><span class="pl-kos">,</span>
              <span class="pl-c1">loader</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"eslint-loader"</span><span class="pl-kos">)</span>
            <span class="pl-kos">}</span>
          <span class="pl-kos">]</span><span class="pl-kos">,</span>
          <span class="pl-c1">include</span>: <span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appSrc</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-kos">{</span>
          <span class="pl-c">// "oneOf" will traverse all following loaders until one will</span>
          <span class="pl-c">// match the requirements. When no loader matches it will fall</span>
          <span class="pl-c">// back to the "file" loader at the end of the loader list.</span>
          <span class="pl-c1">oneOf</span>: <span class="pl-kos">[</span>
            <span class="pl-c">// "url" loader works like "file" loader except that it embeds assets</span>
            <span class="pl-c">// smaller than specified limit in bytes as data URLs to avoid requests.</span>
            <span class="pl-c">// A missing `test` is equivalent to a match.</span>
            <span class="pl-kos">{</span>
              <span class="pl-c1">test</span>: <span class="pl-kos">[</span><span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>bmp<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>gif<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>jpe?g<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>png<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">]</span><span class="pl-kos">,</span>
              <span class="pl-c1">loader</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"url-loader"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
              <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">limit</span>: <span class="pl-s1">imageInlineSizeLimit</span><span class="pl-kos">,</span>
                <span class="pl-c1">name</span>: <span class="pl-s">"static/media/[name].[hash:8].[ext]"</span>
              <span class="pl-kos">}</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c">// Process application JS with Babel.</span>
            <span class="pl-c">// The preset includes JSX, Flow, TypeScript, and some ESnext features.</span>
            <span class="pl-kos">{</span>
              <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>js<span class="pl-c1">|</span>mjs<span class="pl-c1">|</span>jsx<span class="pl-c1">|</span>ts<span class="pl-c1">|</span>tsx<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
              <span class="pl-c1">include</span>: <span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appSrc</span><span class="pl-kos">,</span>
              <span class="pl-c1">loader</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"babel-loader"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
              <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">customize</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span>
                  <span class="pl-s">"babel-preset-react-app/webpack-overrides"</span>
                <span class="pl-kos">)</span><span class="pl-kos">,</span>

                <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
                  <span class="pl-kos">[</span>
                    <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"babel-plugin-named-asset-import"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-kos">{</span>
                      <span class="pl-c1">loaderMap</span>: <span class="pl-kos">{</span>
                        <span class="pl-c1">svg</span>: <span class="pl-kos">{</span>
                          <span class="pl-c1">ReactComponent</span>:
                            <span class="pl-s">"@svgr/webpack?-svgo,+titleProp,+ref![path]"</span>
                        <span class="pl-kos">}</span>
                      <span class="pl-kos">}</span>
                    <span class="pl-kos">}</span>
                  <span class="pl-kos">]</span>
                <span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-c">// This is a feature of `babel-loader` for webpack (not Babel itself).</span>
                <span class="pl-c">// It enables caching results in ./node_modules/.cache/babel-loader/</span>
                <span class="pl-c">// directory for faster rebuilds.</span>
                <span class="pl-c1">cacheDirectory</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                <span class="pl-c">// See #6846 for context on why cacheCompression is disabled</span>
                <span class="pl-c1">cacheCompression</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
                <span class="pl-c1">compact</span>: <span class="pl-s1">isEnvProduction</span>
              <span class="pl-kos">}</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c">// Process any JS outside of the app with Babel.</span>
            <span class="pl-c">// Unlike the application JS, we only compile the standard ES features.</span>
            <span class="pl-kos">{</span>
              <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>js<span class="pl-c1">|</span>mjs<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
              <span class="pl-c1">exclude</span>: <span class="pl-pds"><span class="pl-c1">/</span>@babel<span class="pl-kos">(?:</span><span class="pl-cce">\/</span><span class="pl-c1">|</span><span class="pl-cce">\\</span><span class="pl-kos">{</span>1,2<span class="pl-kos">}</span><span class="pl-kos">)</span>runtime<span class="pl-c1">/</span></span><span class="pl-kos">,</span>
              <span class="pl-c1">loader</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"babel-loader"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
              <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">babelrc</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
                <span class="pl-c1">configFile</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
                <span class="pl-c1">compact</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
                <span class="pl-c1">presets</span>: <span class="pl-kos">[</span>
                  <span class="pl-kos">[</span>
                    <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"babel-preset-react-app/dependencies"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-kos">{</span> <span class="pl-c1">helpers</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span>
                  <span class="pl-kos">]</span>
                <span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-c1">cacheDirectory</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                <span class="pl-c">// See #6846 for context on why cacheCompression is disabled</span>
                <span class="pl-c1">cacheCompression</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>

                <span class="pl-c">// If an error happens in a package, it's possible to be</span>
                <span class="pl-c">// because it was compiled. Thus, we don't want the browser</span>
                <span class="pl-c">// debugger to show the original code. Instead, the code</span>
                <span class="pl-c">// being evaluated would be much more helpful.</span>
                <span class="pl-c1">sourceMaps</span>: <span class="pl-c1">false</span>
              <span class="pl-kos">}</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c">// "postcss" loader applies autoprefixer to our CSS.</span>
            <span class="pl-c">// "css" loader resolves paths in CSS and adds assets as dependencies.</span>
            <span class="pl-c">// "style" loader turns CSS into JS modules that inject &lt;style&gt; tags.</span>
            <span class="pl-c">// In production, we use MiniCSSExtractPlugin to extract that CSS</span>
            <span class="pl-c">// to a file, but in development "style" loader enables hot editing</span>
            <span class="pl-c">// of CSS.</span>
            <span class="pl-c">// By default we support CSS Modules with the extension .module.css</span>
            <span class="pl-kos">{</span>
              <span class="pl-c1">test</span>: <span class="pl-s1">cssRegex</span><span class="pl-kos">,</span>
              <span class="pl-c1">exclude</span>: <span class="pl-s1">cssModuleRegex</span><span class="pl-kos">,</span>
              <span class="pl-c1">use</span>: <span class="pl-en">getStyleLoaders</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
                <span class="pl-c1">importLoaders</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
                <span class="pl-c1">sourceMap</span>: <span class="pl-s1">isEnvProduction</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">shouldUseSourceMap</span>
              <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
              <span class="pl-c">// Don't consider CSS imports dead code even if the</span>
              <span class="pl-c">// containing package claims to have no side effects.</span>
              <span class="pl-c">// Remove this when webpack adds a warning or an error for this.</span>
              <span class="pl-c">// See https://github.com/webpack/webpack/issues/6571</span>
              <span class="pl-c1">sideEffects</span>: <span class="pl-c1">true</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c">// Adds support for CSS Modules (https://github.com/css-modules/css-modules)</span>
            <span class="pl-c">// using the extension .module.css</span>
            <span class="pl-kos">{</span>
              <span class="pl-c1">test</span>: <span class="pl-s1">cssModuleRegex</span><span class="pl-kos">,</span>
              <span class="pl-c1">use</span>: <span class="pl-en">getStyleLoaders</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
                <span class="pl-c1">importLoaders</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
                <span class="pl-c1">sourceMap</span>: <span class="pl-s1">isEnvProduction</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">shouldUseSourceMap</span><span class="pl-kos">,</span>
                <span class="pl-c1">modules</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                <span class="pl-c1">getLocalIdent</span>: <span class="pl-s1">getCSSModuleLocalIdent</span>
              <span class="pl-kos">}</span><span class="pl-kos">)</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c">// Opt-in support for SASS (using .scss or .sass extensions).</span>
            <span class="pl-c">// By default we support SASS Modules with the</span>
            <span class="pl-c">// extensions .module.scss or .module.sass</span>
            <span class="pl-kos">{</span>
              <span class="pl-c1">test</span>: <span class="pl-s1">sassRegex</span><span class="pl-kos">,</span>
              <span class="pl-c1">exclude</span>: <span class="pl-s1">sassModuleRegex</span><span class="pl-kos">,</span>
              <span class="pl-c1">use</span>: <span class="pl-en">getStyleLoaders</span><span class="pl-kos">(</span>
                <span class="pl-kos">{</span>
                  <span class="pl-c1">importLoaders</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span>
                  <span class="pl-c1">sourceMap</span>: <span class="pl-s1">isEnvProduction</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">shouldUseSourceMap</span>
                <span class="pl-kos">}</span><span class="pl-kos">,</span>
                <span class="pl-s">"sass-loader"</span>
              <span class="pl-kos">)</span><span class="pl-kos">,</span>
              <span class="pl-c">// Don't consider CSS imports dead code even if the</span>
              <span class="pl-c">// containing package claims to have no side effects.</span>
              <span class="pl-c">// Remove this when webpack adds a warning or an error for this.</span>
              <span class="pl-c">// See https://github.com/webpack/webpack/issues/6571</span>
              <span class="pl-c1">sideEffects</span>: <span class="pl-c1">true</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c">// Adds support for CSS Modules, but using SASS</span>
            <span class="pl-c">// using the extension .module.scss or .module.sass</span>
            <span class="pl-kos">{</span>
              <span class="pl-c1">test</span>: <span class="pl-s1">sassModuleRegex</span><span class="pl-kos">,</span>
              <span class="pl-c1">use</span>: <span class="pl-en">getStyleLoaders</span><span class="pl-kos">(</span>
                <span class="pl-kos">{</span>
                  <span class="pl-c1">importLoaders</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span>
                  <span class="pl-c1">sourceMap</span>: <span class="pl-s1">isEnvProduction</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">shouldUseSourceMap</span><span class="pl-kos">,</span>
                  <span class="pl-c1">modules</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                  <span class="pl-c1">getLocalIdent</span>: <span class="pl-s1">getCSSModuleLocalIdent</span>
                <span class="pl-kos">}</span><span class="pl-kos">,</span>
                <span class="pl-s">"sass-loader"</span>
              <span class="pl-kos">)</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c">// "file" loader makes sure those assets get served by WebpackDevServer.</span>
            <span class="pl-c">// When you `import` an asset, you get its (virtual) filename.</span>
            <span class="pl-c">// In production, they would get copied to the `build` folder.</span>
            <span class="pl-c">// This loader doesn't use a "test" so it will catch all modules</span>
            <span class="pl-c">// that fall through the other loaders.</span>
            <span class="pl-kos">{</span>
              <span class="pl-c1">loader</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"file-loader"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
              <span class="pl-c">// Exclude `js` files to keep "css" loader working as it injects</span>
              <span class="pl-c">// its runtime that would otherwise be processed through "file" loader.</span>
              <span class="pl-c">// Also exclude `html` and `json` extensions so they get processed</span>
              <span class="pl-c">// by webpacks internal loaders.</span>
              <span class="pl-c1">exclude</span>: <span class="pl-kos">[</span><span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>js<span class="pl-c1">|</span>mjs<span class="pl-c1">|</span>jsx<span class="pl-c1">|</span>ts<span class="pl-c1">|</span>tsx<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>html<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>json<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">]</span><span class="pl-kos">,</span>
              <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">name</span>: <span class="pl-s">"static/media/[name].[hash:8].[ext]"</span>
              <span class="pl-kos">}</span>
            <span class="pl-kos">}</span>
            <span class="pl-c">// ** STOP ** Are you adding a new loader?</span>
            <span class="pl-c">// Make sure to add the new loader(s) before the "file" loader.</span>
          <span class="pl-kos">]</span>
        <span class="pl-kos">}</span>
      <span class="pl-kos">]</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
      <span class="pl-c">// Generates an `index.html` file with the &lt;script&gt; injected.</span>
      <span class="pl-k">new</span> <span class="pl-v">HtmlWebpackPlugin</span><span class="pl-kos">(</span>
        <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">assign</span><span class="pl-kos">(</span>
          <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
          <span class="pl-kos">{</span>
            <span class="pl-c1">inject</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
            <span class="pl-c1">template</span>: <span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appHtml</span>
          <span class="pl-kos">}</span><span class="pl-kos">,</span>
          <span class="pl-s1">isEnvProduction</span>
            ? <span class="pl-kos">{</span>
                <span class="pl-c1">minify</span>: <span class="pl-kos">{</span>
                  <span class="pl-c1">removeComments</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                  <span class="pl-c1">collapseWhitespace</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                  <span class="pl-c1">removeRedundantAttributes</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                  <span class="pl-c1">useShortDoctype</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                  <span class="pl-c1">removeEmptyAttributes</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                  <span class="pl-c1">removeStyleLinkTypeAttributes</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                  <span class="pl-c1">keepClosingSlash</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                  <span class="pl-c1">minifyJS</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                  <span class="pl-c1">minifyCSS</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                  <span class="pl-c1">minifyURLs</span>: <span class="pl-c1">true</span>
                <span class="pl-kos">}</span>
              <span class="pl-kos">}</span>
            : <span class="pl-c1">undefined</span>
        <span class="pl-kos">)</span>
      <span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// Inlines the webpack runtime script. This script is too small to warrant</span>
      <span class="pl-c">// a network request.</span>
      <span class="pl-c">// https://github.com/facebook/create-react-app/issues/5358</span>
      <span class="pl-s1">isEnvProduction</span> <span class="pl-c1">&amp;&amp;</span>
        <span class="pl-s1">shouldInlineRuntimeChunk</span> <span class="pl-c1">&amp;&amp;</span>
        <span class="pl-k">new</span> <span class="pl-v">InlineChunkHtmlPlugin</span><span class="pl-kos">(</span><span class="pl-v">HtmlWebpackPlugin</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-pds"><span class="pl-c1">/</span>runtime-.<span class="pl-c1">+</span><span class="pl-kos">[</span>.<span class="pl-kos">]</span>js<span class="pl-c1">/</span></span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// Makes some environment variables available in index.html.</span>
      <span class="pl-c">// The public URL is available as %PUBLIC_URL% in index.html, e.g.:</span>
      <span class="pl-c">// &lt;link rel="icon" href="%PUBLIC_URL%/favicon.ico"&gt;</span>
      <span class="pl-c">// In production, it will be an empty string unless you specify "homepage"</span>
      <span class="pl-c">// in `package.json`, in which case it will be the pathname of that URL.</span>
      <span class="pl-c">// In development, this will be an empty string.</span>
      <span class="pl-k">new</span> <span class="pl-v">InterpolateHtmlPlugin</span><span class="pl-kos">(</span><span class="pl-v">HtmlWebpackPlugin</span><span class="pl-kos">,</span> <span class="pl-s1">env</span><span class="pl-kos">.</span><span class="pl-c1">raw</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// This gives some necessary context to module not found errors, such as</span>
      <span class="pl-c">// the requesting resource.</span>
      <span class="pl-k">new</span> <span class="pl-v">ModuleNotFoundPlugin</span><span class="pl-kos">(</span><span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appPath</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// Makes some environment variables available to the JS code, for example:</span>
      <span class="pl-c">// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.</span>
      <span class="pl-c">// It is absolutely essential that NODE_ENV is set to production</span>
      <span class="pl-c">// during a production build.</span>
      <span class="pl-c">// Otherwise React will be compiled in the very slow development mode.</span>
      <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">DefinePlugin</span><span class="pl-kos">(</span><span class="pl-s1">env</span><span class="pl-kos">.</span><span class="pl-c1">stringified</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// This is necessary to emit hot updates (currently CSS only):</span>
      <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">HotModuleReplacementPlugin</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// Watcher doesn't work well if you mistype casing in a path so we use</span>
      <span class="pl-c">// a plugin that prints an error when you attempt to do this.</span>
      <span class="pl-c">// See https://github.com/facebook/create-react-app/issues/240</span>
      <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-k">new</span> <span class="pl-v">CaseSensitivePathsPlugin</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// If you require a missing module and then `npm install` it, you still have</span>
      <span class="pl-c">// to restart the development server for Webpack to discover it. This plugin</span>
      <span class="pl-c">// makes the discovery automatic so you don't have to restart.</span>
      <span class="pl-c">// See https://github.com/facebook/create-react-app/issues/186</span>
      <span class="pl-s1">isEnvDevelopment</span> <span class="pl-c1">&amp;&amp;</span>
        <span class="pl-k">new</span> <span class="pl-v">WatchMissingNodeModulesPlugin</span><span class="pl-kos">(</span><span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appNodeModules</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-s1">isEnvProduction</span> <span class="pl-c1">&amp;&amp;</span>
        <span class="pl-k">new</span> <span class="pl-v">MiniCssExtractPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
          <span class="pl-c">// Options similar to the same options in webpackOptions.output</span>
          <span class="pl-c">// both options are optional</span>
          <span class="pl-c1">filename</span>: <span class="pl-s">"static/css/[name].[contenthash:8].css"</span><span class="pl-kos">,</span>
          <span class="pl-c1">chunkFilename</span>: <span class="pl-s">"static/css/[name].[contenthash:8].chunk.css"</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// Generate an asset manifest file with the following content:</span>
      <span class="pl-c">// - "files" key: Mapping of all asset filenames to their corresponding</span>
      <span class="pl-c">//   output file so that tools can pick it up without having to parse</span>
      <span class="pl-c">//   `index.html`</span>
      <span class="pl-c">// - "entrypoints" key: Array of files which are included in `index.html`,</span>
      <span class="pl-c">//   can be used to reconstruct the HTML if necessary</span>
      <span class="pl-k">new</span> <span class="pl-v">ManifestPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
        <span class="pl-c1">fileName</span>: <span class="pl-s">"asset-manifest.json"</span><span class="pl-kos">,</span>
        <span class="pl-c1">publicPath</span>: <span class="pl-s1">publicPath</span><span class="pl-kos">,</span>
        <span class="pl-en">generate</span>: <span class="pl-kos">(</span><span class="pl-s1">seed</span><span class="pl-kos">,</span> <span class="pl-s1">files</span><span class="pl-kos">,</span> <span class="pl-s1">entrypoints</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
          <span class="pl-k">const</span> <span class="pl-s1">manifestFiles</span> <span class="pl-c1">=</span> <span class="pl-s1">files</span><span class="pl-kos">.</span><span class="pl-en">reduce</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">manifest</span><span class="pl-kos">,</span> <span class="pl-s1">file</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
            <span class="pl-s1">manifest</span><span class="pl-kos">[</span><span class="pl-s1">file</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">file</span><span class="pl-kos">.</span><span class="pl-c1">path</span><span class="pl-kos">;</span>
            <span class="pl-k">return</span> <span class="pl-s1">manifest</span><span class="pl-kos">;</span>
          <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">seed</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
          <span class="pl-k">const</span> <span class="pl-s1">entrypointFiles</span> <span class="pl-c1">=</span> <span class="pl-s1">entrypoints</span><span class="pl-kos">.</span><span class="pl-c1">main</span><span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span>
            <span class="pl-s1">fileName</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">!</span><span class="pl-s1">fileName</span><span class="pl-kos">.</span><span class="pl-en">endsWith</span><span class="pl-kos">(</span><span class="pl-s">".map"</span><span class="pl-kos">)</span>
          <span class="pl-kos">)</span><span class="pl-kos">;</span>

          <span class="pl-k">return</span> <span class="pl-kos">{</span>
            <span class="pl-c1">files</span>: <span class="pl-s1">manifestFiles</span><span class="pl-kos">,</span>
            <span class="pl-c1">entrypoints</span>: <span class="pl-s1">entrypointFiles</span>
          <span class="pl-kos">}</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>
      <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// Moment.js is an extremely popular library that bundles large locale files</span>
      <span class="pl-c">// by default due to how Webpack interprets its code. This is a practical</span>
      <span class="pl-c">// solution that requires the user to opt into importing specific locales.</span>
      <span class="pl-c">// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack</span>
      <span class="pl-c">// You can remove this if you don't use Moment.js:</span>
      <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">IgnorePlugin</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">^</span><span class="pl-cce">\.</span><span class="pl-cce">\/</span>locale<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-pds"><span class="pl-c1">/</span>moment<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// Generate a service worker script that will precache, and keep up to date,</span>
      <span class="pl-c">// the HTML &amp; assets that are part of the Webpack build.</span>
      <span class="pl-s1">isEnvProduction</span> <span class="pl-c1">&amp;&amp;</span>
        <span class="pl-k">new</span> <span class="pl-v">WorkboxWebpackPlugin</span><span class="pl-kos">.</span><span class="pl-c1">GenerateSW</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
          <span class="pl-c1">clientsClaim</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
          <span class="pl-c1">exclude</span>: <span class="pl-kos">[</span><span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>map<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-pds"><span class="pl-c1">/</span>asset-manifest<span class="pl-cce">\.</span>json<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">]</span><span class="pl-kos">,</span>
          <span class="pl-c1">importWorkboxFrom</span>: <span class="pl-s">"cdn"</span><span class="pl-kos">,</span>
          <span class="pl-c1">navigateFallback</span>: <span class="pl-s1">publicUrl</span> <span class="pl-c1">+</span> <span class="pl-s">"/index.html"</span><span class="pl-kos">,</span>
          <span class="pl-c1">navigateFallbackBlacklist</span>: <span class="pl-kos">[</span>
            <span class="pl-c">// Exclude URLs starting with /_, as they're likely an API call</span>
            <span class="pl-k">new</span> <span class="pl-v">RegExp</span><span class="pl-kos">(</span><span class="pl-s">"^/_"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
            <span class="pl-c">// Exclude any URLs whose last part seems to be a file extension</span>
            <span class="pl-c">// as they're likely a resource and not a SPA route.</span>
            <span class="pl-c">// URLs containing a "?" character won't be blacklisted as they're likely</span>
            <span class="pl-c">// a route with query params (e.g. auth callbacks).</span>
            <span class="pl-k">new</span> <span class="pl-v">RegExp</span><span class="pl-kos">(</span><span class="pl-s">"/[^/?]+\\.[^/]+$"</span><span class="pl-kos">)</span>
          <span class="pl-kos">]</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// TypeScript type checking</span>
      <span class="pl-s1">useTypeScript</span> <span class="pl-c1">&amp;&amp;</span>
        <span class="pl-k">new</span> <span class="pl-v">ForkTsCheckerWebpackPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
          <span class="pl-c1">typescript</span>: <span class="pl-s1">resolve</span><span class="pl-kos">.</span><span class="pl-en">sync</span><span class="pl-kos">(</span><span class="pl-s">"typescript"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
            <span class="pl-c1">basedir</span>: <span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appNodeModules</span>
          <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
          <span class="pl-c1">async</span>: <span class="pl-s1">isEnvDevelopment</span><span class="pl-kos">,</span>
          <span class="pl-c1">useTypescriptIncrementalApi</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
          <span class="pl-c1">checkSyntacticErrors</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
          <span class="pl-c1">resolveModuleNameModule</span>: <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">versions</span><span class="pl-kos">.</span><span class="pl-c1">pnp</span>
            ? <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">__dirname</span><span class="pl-kos">}</span></span>/pnpTs.js`</span>
            : <span class="pl-c1">undefined</span><span class="pl-kos">,</span>
          <span class="pl-c1">resolveTypeReferenceDirectiveModule</span>: <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">versions</span><span class="pl-kos">.</span><span class="pl-c1">pnp</span>
            ? <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">__dirname</span><span class="pl-kos">}</span></span>/pnpTs.js`</span>
            : <span class="pl-c1">undefined</span><span class="pl-kos">,</span>
          <span class="pl-c1">tsconfig</span>: <span class="pl-s1">paths</span><span class="pl-kos">.</span><span class="pl-c1">appTsConfig</span><span class="pl-kos">,</span>
          <span class="pl-c1">reportFiles</span>: <span class="pl-kos">[</span>
            <span class="pl-s">"**"</span><span class="pl-kos">,</span>
            <span class="pl-s">"!**/__tests__/**"</span><span class="pl-kos">,</span>
            <span class="pl-s">"!**/?(*.)(spec|test).*"</span><span class="pl-kos">,</span>
            <span class="pl-s">"!**/src/setupProxy.*"</span><span class="pl-kos">,</span>
            <span class="pl-s">"!**/src/setupTests.*"</span>
          <span class="pl-kos">]</span><span class="pl-kos">,</span>
          <span class="pl-c1">silent</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
          <span class="pl-c">// The formatter is invoked directly in WebpackDevServerUtils during development</span>
          <span class="pl-c1">formatter</span>: <span class="pl-s1">isEnvProduction</span> ? <span class="pl-s1">typescriptFormatter</span> : <span class="pl-c1">undefined</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// THIS BREAKS THE BUILD WHEN USING contenthash</span>
      <span class="pl-k">new</span> <span class="pl-v">MonacoWebpackPlugin</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
      <span class="pl-c">// new BundleAnalyzerPlugin()</span>
    <span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span><span class="pl-v">Boolean</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c">// Some libraries import Node modules but don't use them in the browser.</span>
    <span class="pl-c">// Tell Webpack to provide empty mocks for them so importing them works.</span>
    <span class="pl-c1">node</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">module</span>: <span class="pl-s">"empty"</span><span class="pl-kos">,</span>
      <span class="pl-c1">dgram</span>: <span class="pl-s">"empty"</span><span class="pl-kos">,</span>
      <span class="pl-c1">dns</span>: <span class="pl-s">"mock"</span><span class="pl-kos">,</span>
      <span class="pl-c1">fs</span>: <span class="pl-s">"empty"</span><span class="pl-kos">,</span>
      <span class="pl-c1">http2</span>: <span class="pl-s">"empty"</span><span class="pl-kos">,</span>
      <span class="pl-c1">net</span>: <span class="pl-s">"empty"</span><span class="pl-kos">,</span>
      <span class="pl-c1">tls</span>: <span class="pl-s">"empty"</span><span class="pl-kos">,</span>
      <span class="pl-c1">child_process</span>: <span class="pl-s">"empty"</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c">// Turn off performance processing because we utilize</span>
    <span class="pl-c">// our own hints via the FileSizeReporter</span>
    <span class="pl-c1">performance</span>: <span class="pl-c1">false</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>