Low-Level Tools

Usage

Modern.js internally integrates tools such as Babel, TypeScript, Webpack, PostCSS, Tailwind CSS 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 Webpack as an example, just add tools.webpack to the modern.config.ts:

modern.config.ts
export default defineConfig({
  tools: {
    webpack: config => {},
  },
});

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
DevServertools.devServer
Babeltools.babel
styled-componentstools.styledComponents
PostCSStools.postcss
Lesstools.less
Sasstools.sass
webpacktools.webpack
Minify CSStools.minifyCss
tersertools.terser
Tailwind CSStools.tailwind
Autoprefixertools.autoprefixer