--- title: "Html" locale: "zh" version: "1.x" canonicalUrl: "https://farmfe.org/zh/docs/1.x/features/html" publicationStatus: "prerelease" --- # Html ## 基本用法 Farm 支持开箱即用地编译 Html，并且在构建 Web 项目时应该使用 Html 作为入口，例如： ```ts import type { UserConfig } from "@farmfe/core"; export default defineConfig({ input: { index: "./index.html", // using ./index.html as entry }, }); ``` > [!NOTE] > 备注 > > 如果未指定 ` input `，则默认为 ` {index: './index.html'} `。 在` ./index.html `中，应该使用` ``` 你也可以使用` `来引用你的全局 CSS。 Farm 在编译时会将这些 ` script ` 和 ` link ` 转化为最终的生产可用的产物。请注意，当您想引用本地模块时，必须使用 ` 相对路径 `，例如 ` ` 将引用本地模块并编译它， 但 ` ` 或 ` ` 则不会。 > [!NOTE] > 备注 > > ` script ` 和 ` link ` 可以引用 farm 支持的任何模块类型，例如，` js `、` jsx `、` ts `、` tsx ` 或插件支持的其他模块类型。 您可以根据需要使用任意数量的 ` script ` 或 ` link `。 ## 多页面应用程序 - MPA 如果您正在构建多页面应用程序，只需配置多个 html，例如： ```ts import type { UserConfig } from '@farmfe/core'; export default defineConfig({ input: { home: './index.html', // Home Page about: './about.html', // About Page // ... more pages } }) ``` Farm 将并行编译这些页面。 ## 继承 html 模板 Farm 支持通过使用 ` html.base ` 配置继承 html 模板，这在构建共享 html 的多页面应用程序时很有帮助。 ```ts import type { UserConfig } from "@farmfe/core"; export function defineConfig(config: UserConfig) { return config; } export default defineConfig({ // ... compilation: { input: { home: "./index.html", // Home Page about: "./about.html", // About Page // ... more pages }, html: { base: "./base.html", }, }, }); ``` 然后添加一个` base.html `，占位符` {{children}} `将被替换为子 html 的内容。 ```html Document
{{children}} ``` 继承` ./base.html `： ```html ```