Build Engine#

Modern.js uses Modern.js Builder to build your Web App.

Modern.js Builder is one of the core components of the Modern.js system. It is a build tool for web development scenarios that can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and Rspack, and by default uses the most mature webpack for bundling.

Build Architecture#

From a building perspective, Modern.js is divided into three layers, from top to bottom:

• Upper-level development framework: Modern.js.
• Common build tool: Modern.js Builder.
• Low-level bundler: webpack and Rspack.

Builder Documentation#

Since Modern.js Builder is a module that can be used independently, we have provided separate documentation for it, which can be found at modernjs.dev/builder.

In this documentation, you can learn about the detailed introduction of Modern.js Builder, and you can also find complete usage guides for various building capabilities. If you have any building needs or problems, it is recommended that you read the Modern.js Builder documentation first to solve them.

Builder Configuration#

Modern.js's configuration inherits from Modern.js Builder, so you can use all the build configurations provided by Modern.js Builder in Modern.js.

Taking the html.title config option of Modern.js Builder as an example, you can directly use this option in the modern.config.ts file, and it will be automatically passed to Modern.js Builder.

export default defineConfig({
  html: {
    title: 'example',
  },
});

For detailed information about build configuration, please refer to 「Modern.js Builder - Builder Config」.

Builder Capabilities#

Modern.js Builder provides rich build capabilities, including JavaScript compilation, CSS compilation, static assets processing, code hot update, code compression, TS type checking, and dozens of other capabilities.

We recommend that you read 「Modern.js Builder - All Features」 to learn about all the features provided by Modern.js Builder.