"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[938],{1362:(n,a,s)=>{s.r(a),s.d(a,{data:()=>t});const t={key:"v-7b48519a",path:"/guide/template.html",title:"HTML 模板",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"自定义模板",slug:"自定义模板",children:[]},{level:2,title:"模板配置",slug:"模板配置",children:[]},{level:2,title:"模板变量",slug:"模板变量",children:[]}],filePathRelative:"guide/template.md",git:{updatedTime:1656304886e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5213:(n,a,s)=>{s.r(a),s.d(a,{default:()=>w});var t=s(6252);const p=(0,t._)("h1",{id:"html-模板",tabindex:"-1"},[(0,t._)("a",{class:"header-anchor",href:"#html-模板","aria-hidden":"true"},"#"),(0,t.Uk)(" HTML 模板")],-1),e=(0,t.Uk)("Fes.js 基于 "),l={href:"https://github.com/jantimon/html-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},o=(0,t.Uk)("html-webpack-plugin"),c=(0,t.Uk)(" 实现的模板功能，默认模板内容是："),u=(0,t.uE)('

<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset="utf-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width,initial-scale=1.0">\n    <title><%= htmlWebpackPlugin.options.title %></title>\n  </head>\n  <body>\n    <div id="app"></div>\n  </body>\n</html>\n

1
2
3
4
5
6
7
8
9
10
11
12

自定义模板

在 src/public 文件夹中创建index.html，Fes.js 约定如果这个文件存在，则会替换默认模板。

模板配置

',4),i=(0,t.Uk)("在配置文件（"),r=(0,t._)("code",null,".fes.js",-1),k=(0,t.Uk)("）中配置 "),d=(0,t._)("code",null,"html",-1),g=(0,t.Uk)("，把"),m={href:"https://github.com/jantimon/html-webpack-plugin#options",target:"_blank",rel:"noopener noreferrer"},b=(0,t.Uk)("配置"),h=(0,t.Uk)("的对象作为参数传入 "),v=(0,t._)("code",null,"html-webpack-plugin",-1),q=(0,t.Uk)(" 实例。"),f=(0,t.uE)('

举个 🌰 ：

export default {\n    html: {\n        title: '海贼王'\n    }\n}\n

1
2
3
4
5

页面的标题会设置成'海贼王'。

模板变量

当然我们也可以手动编写模板，在模板中添加link、link、meta等标签。在我们手动配置模板时，有时候需要用到一些环境变量，模板里可以获取到的变量如下：

htmlWebpackPlugin，特定于此插件的数据
webpackConfig，用于此编译的webpack配置。例如，它可用于获取publicPath（webpackConfig.output.publicPath）。
compilation，webpack编译对象。例如，可以使用它来获取已处理资产的内容，并将其直接内联到页面中compilation.assets[...].source()

举个 🌰 ：

<link rel="icon" type="image/x-icon" href="<%= webpackConfig.output.publicPath %>favicon.png" />\n

除上述 html-webpack-plugin 插件提供的变量外，Fes.js 还把 process.env 中的环境变量添加到模板作用域内：

NODE_ENV
FES_ENV
.env 文件中以 FES_APP_ 开头的变量

举个 🌰 ：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">\n

',12),_={},w=(0,s(3744).Z)(_,[["render",function(n,a){const s=(0,t.up)("OutboundLink");return(0,t.wg)(),(0,t.iD)(t.HY,null,[p,(0,t._)("p",null,[e,(0,t._)("a",l,[o,(0,t.Wm)(s)]),c]),u,(0,t._)("p",null,[i,r,k,d,g,(0,t._)("a",m,[b,(0,t.Wm)(s)]),h,v,q]),f],64)}]])},3744:(n,a)=>{a.Z=(n,a)=>{const s=n.__vccOpts||n;for(const[n,t]of a)s[n]=t;return s}}}]);

# 自定义模板

# 模板配置

# 模板变量

自定义模板

模板配置

模板变量