--- title: "Html" locale: "en" version: "1.x" canonicalUrl: "https://farmfe.org/docs/1.x/features/html" publicationStatus: "prerelease" --- # Html ## Basic Usage Farm support compile Html out of box, **and you should use Html as entry when build a web project**, for example: ```ts import type { defineConfig } from "@farmfe/core"; export default defineConfig({ input: { index: "./index.html", // using ./index.html as entry }, }); ``` > [!NOTE] > note > > If the input is not specified, default to ` { index: 'index.html' } `. and in ` ./index.html `, a ` ``` and you can also use ` ` to refer to your global css. Farm will transform these ` scripts ` and ` links ` to final production resources when compiling. Note that you have to use ` relative path ` when you want to refer to a local module, for example ` ` will refer to a local module and compile it, but ` ` or ` ` would not. > [!TIP] > tip > > The ` script ` and ` link ` can refer to any module types that farm support, for example, ` js `, ` jsx `, ` ts `, ` tsx `, or other module types supported by plugins. You can use as many ` scripts ` or ` links ` as you want. ## Multi Page App If you are building a Multi Page Application, just configure multiple html input, for example: ```ts import { defineConfig } from "@farmfe/core"; export default defineConfig({ compilation: { input: { home: "./index.html", // Home Page about: "./about.html", // About Page // ... more pages }, }, }); ``` Farm will compile these pages in parallel, and all dependencies of these pages will be shared too. ## Inherit html template Farm supports inherit html template by using ` html.base ` config, which is helpful when building a multi-page application with html shared. ```ts import { defineConfig } from "@farmfe/core"; export default defineConfig({ // ... compilation: { input: { home: "./index.html", // Home Page about: "./about.html", // About Page // ... more pages }, // c-highlight-start html: { base: "./base.html", }, // c-highlight-end }, }); ``` Then add a ` base.html `, placeholder ` {{children}} ` will be replaced by children's content. ```html Document
{{children}} ``` Inherit ` ./base.html `: ```html ```