import{_ as n,r as i,o as c,c as o,b as e,d as t,a as r,f as s}from"./app.bd9c95b7.js";const l={},h=s('<h1 id="支持-vite-和-webpack-双构建" tabindex="-1"><a class="header-anchor" href="#支持-vite-和-webpack-双构建" aria-hidden="true">#</a> 支持 Vite 和 Webpack 双构建</h1><p><code>Fes.js@3.0.x</code> 版本支持 Vite 和 Webpack 两种构建方式，不再内置构建方式，需要开发者自行选择:</p><ul><li>选用 Vite 构建，安装 <code>npm i @fesjs/builder-vite</code> 依赖即可。</li><li>选用 Webpack 构建，安装 <code>npm i @fesjs/builder-webpack</code> 依赖即可。</li></ul><h2 id="使用差异" tabindex="-1"><a class="header-anchor" href="#使用差异" aria-hidden="true">#</a> 使用差异</h2><p>由于 Fes.js 在 Vite 和 Webpack 上做了一层封装，开发者关心的构建配置不会太多。从使用上来说，主要存在以下几个差异点：</p><h3 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h3><p>Webpack 和 Vite 构建在配置方面有一些差异，具体可以查看<a href="../reference/config">配置</a>。</p><h3 id="静态文件处理" tabindex="-1"><a class="header-anchor" href="#静态文件处理" aria-hidden="true">#</a> 静态文件处理</h3>',8),d=e("code",null,"require",-1),p={href:"https://cn.vitejs.dev/guide/assets.html",target:"_blank",rel:"noopener noreferrer"},u=e("h3",{id:"html-模版",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#html-模版","aria-hidden":"true"},"#"),t(" html 模版")],-1),_={href:"https://github.com/jantimon/html-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},b={href:"https://github.com/vbenjs/vite-plugin-html",target:"_blank",rel:"noopener noreferrer"},m=e("div",{class:"custom-container tip"},[e("p",{class:"custom-container-title"},"提示"),e("p",null,[t("fes3.0+ html 模版文件从 "),e("code",null,"public/index.html"),t(" 挪到项目根目录。")])],-1);function f(k,x){const a=i("ExternalLinkIcon");return c(),o("div",null,[h,e("p",null,[t("由于 Vite 的限制，不支持 "),d,t(" 语法，具体 Vite 的用法可以查看"),e("a",p,[t("官网"),r(a)])]),u,e("p",null,[t("html 模版比较常规的需求，例如模版变量，Webpack 和 Vite 之间没什么差异。如果有其他特殊的需求， Webpack 可以使用 "),e("a",_,[t("html-webpack-plugin"),r(a)]),t("，Vite 使用"),e("a",b,[t("vite-plugin-html"),r(a)]),t(" 进行个性化配置。")]),m])}const v=n(l,[["render",f],["__file","builder.html.vue"]]);export{v as default};