Low-Level Tools


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:

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:

Tools Config
DevServer tools.devServer
Babel tools.babel
styled-components tools.styledComponents
PostCSS tools.postcss
Less tools.less
Sass tools.sass
webpack tools.webpack
Minify CSS tools.minifyCss
terser tools.terser
Tailwind CSS tools.tailwind
Autoprefixer tools.autoprefixer