Low-Level Tools

Usage

Modern.js internally integrates tools such as TypeScript, Rspack, PostCSS, SWC by default.

Usually, the default configuration can meet most development needs. When there are special needs, it can be achieved through the underlying configuration.

Take configuring Rspack as an example, just add tools.rspack to the modern.config.ts:

modern.config.ts
export default defineConfig({
  tools: {
    rspack: config => {
      // Modify Rspack configuration
    },
  },
});

Configurations in the tools can be set to Object or Function.

When the value is Object, it will be merged with the default configuration. For the specific merging strategy, refer to the configuration options document (see table below).

When the value is Function, the first parameter is the default configuration value. You can directly modify this object without returning it, or you can return a new object or a merged object as the final result.

Low-level Configuration Details

Currently provided is as follows:

ToolsConfig
Rspacktools.rspack
Bundler Chaintools.bundlerChain
SWCtools.swc
TypeScript Checkertools.tsChecker
PostCSStools.postcss
Lesstools.less
Sasstools.sass
CSS Extracttools.cssExtract
CSS Loadertools.cssLoader
Style Loadertools.styleLoader
Lightning CSStools.lightningcssLoader
Minify CSStools.minifyCss
Autoprefixertools.autoprefixer
HTML Plugintools.htmlPlugin