logo
  • Guide
  • Config
  • Plugin
  • API
  • Examples
  • Community
  • Modern.js 2.x Docs
  • English
    • 简体中文
    • English
    • Configuration
      dev
      assetPrefix
      beforeStartUrl
      client
      hmr
      host
      https
      lazyCompilation
      liveReload
      port
      progressBar
      setupMiddlewares
      startUrl
      watchFiles
      writeToDisk
      bff
      prefix
      html
      appIcon
      crossorigin
      favicon
      inject
      meta
      mountId
      outputStructure
      scriptLoading
      tags
      templateParameters
      template
      title
      tools
      autoprefixer
      babel
      bundlerChain
      cssExtract
      cssLoader
      devServer
      htmlPlugin
      less
      lightningcssLoader
      minifyCss
      postcss
      rspack
      sass
      styleLoader
      swc
      tsChecker
      source
      aliasStrategy
      alias
      configDir
      decorators
      define
      disableDefaultEntries
      enableAsyncEntry
      entriesDir
      entries
      exclude
      globalVars
      include
      mainEntryName
      preEntry
      transformImport
      resolve
      aliasStrategy
      alias
      conditionNames
      dedupe
      extensions
      server
      baseUrl
      port
      publicRoutes
      routes
      ssrByEntries
      ssr
      output
      assetPrefix
      assetsRetry
      charset
      cleanDistPath
      convertToRem
      copy
      cssModules
      dataUriLimit
      disableCssModuleExtension
      disableInlineRuntimeChunk
      disableSvgr
      disableTsChecker
      distPath
      enableAssetManifest
      enableCssModuleTSDeclaration
      disableInlineRouteManifests
      externals
      filenameHash
      filename
      injectStyles
      inlineScripts
      inlineStyles
      legalComments
      minify
      overrideBrowserslist
      polyfill
      sourceMap
      splitRouteChunks
      ssg
      ssgByEntries
      svgDefaultExport
      tempDir
      plugins
      security
      checkSyntax
      nonce
      sri
      runtime
      Introduce
      plugins
      router
      performance
      buildCache
      bundleAnalyze
      chunkSplit
      dnsPrefetch
      preconnect
      prefetch
      preload
      printFileSize
      profile
      removeConsole
      removeMomentLocale
      experiments
      sourceBuild
      builderPlugins
      📝 Edit this page
      Previous pageentriesDirNext pageexclude

      #source.entries

      • Type:
      type Entries = Record<
        string,
        | string
        | {
            entry: string;
            disableMount?: boolean;
          }
      >;
      • Default: The entry object calculated based on the directory structure of the current project.

      Used to configure custom page entries.

      When to use

      For most scenarios, the entry automatically generated by Modern.js based on the directory structure can meet the requirements. For details, please refer to Entry.

      If you need to customize page entries, you can set them through this option.

      #String

      When the value of the entries object is of type string, it represents the file path of the entry module:

      modern.config.ts
      import { defineConfig } from '@modern-js/app-tools';
      
      export default defineConfig({
        source: {
          entries: {
            // Specify a new entry named 'my-entry'
            'my-entry': './src/home/test/index.ts',
          },
          disableDefaultEntries: true,
        },
      });

      By default, the configured entry is equivalent to App.[jt]sx, which means that the specified entry file only needs to export the root component of the application.

      For example, the following directory structure:

      .
      ├── src
      │   └── entry
      │       ├── chat.tsx
      │       └── home.tsx
      └── package.json

      The above directory does not conform to the directory structure convention of Modern.js, so Modern.js will not get any default entries when analyzing the directory structure.

      If you do not want to change the directory structure (such as project migration), you can customize the entry through source.entries:

      modern.config.ts
      export default defineConfig({
        source: {
          entries: {
            home: './src/entry/home.tsx',
            chat: './src/entry/chat.tsx',
          },
          disableDefaultEntries: true,
        },
      });

      #Object

      When the value is Object, the following attributes can be configured:

      • entry: string, the entry file path.
      • disableMount: boolean = false, disable Modern.js's behavior of automatically generating entry code.
      modern.config.ts
      import { defineConfig } from '@modern-js/app-tools';
      
      export default defineConfig({
        source: {
          entries: {
            'my-entry': {
              // entry file path
              entry: './src/my-page/index.tsx',
              disableMount: true,
            },
          },
          // Disable default entry scanning
          disableDefaultEntries: true,
        },
      });

      #Disable entry file generation

      By default, the configured entry is equivalent to App.[jt]sx, and Modern.js will automatically generate an entry file to reference the entry you configured.

      If you want to disable the logic of Modern.js automatically generating entry files, you can set the disableMount property to true.

      modern.config.ts
      export default defineConfig({
        source: {
          entries: {
            'my-entry': {
              entry: './src/my-page/index.tsx',
              disableMount: true,
            },
          },
          // Disable default entry scanning
          disableDefaultEntries: true,
        },
      });

      #Conventional Routing

      If you need to enable conventional routing for a custom entry, you can set entry to a directory path:

      modern.config.ts
      import { defineConfig } from '@modern-js/app-tools';
      
      export default defineConfig({
        source: {
          entries: {
            // enable conventional routing
            entry_spa: {
              // The entry path of conventional routing must be set to a directory
              entry: './src/about',
            },
          },
          // Disable default entry scanning
          disableDefaultEntries: true,
        },
      });

      #Entry Merge Rules

      After setting source.entries, if disableDefaultEntries: true is not set, Modern.js will merge the custom entry with the entry obtained by analyzing the directory structure.

      The merge rule is:

      • Compare the entry paths set by the custom entry setting and the default entry path. When the entry paths are the same, the custom entry will override the default entry.

      For example, the following directory structure:

      .
      ├── src
      │   ├── chat
      │   │   └── App.tsx
      │   └── home
      │       └── index.ts
      └── package.json

      Modern.js will analyze the src/ directory and get the default entries chat and home. When the user configures as follows in the modern.config.ts file:

      modern.config.ts
      import { defineConfig } from '@modern-js/app-tools';
      
      export default defineConfig({
        source: {
          entries: {
            index: './src/home/index.ts',
          },
        },
      };

      It can be seen that the path of the custom entry index is the same as the path of the default entry home. During the merge process, index will override home, and the final entry is as follows:

      • chat -> ./src/chat/App.tsx
      • index -> ./src/home/index.ts