fes.js/assets/guide_builder.md.7aef2181.js

import{_ as e,o as a,c as t,V as i}from"./chunks/framework.b31a4d00.js";const m=JSON.parse('{"title":"Vite 和 Webpack 双构建","description":"","frontmatter":{},"headers":[],"relativePath":"guide/builder.md"}'),r={name:"guide/builder.md"},l=i('<h1 id="vite-和-webpack-双构建" tabindex="-1">Vite 和 Webpack 双构建 <a class="header-anchor" href="#vite-和-webpack-双构建" aria-label="Permalink to &quot;Vite 和 Webpack 双构建&quot;">​</a></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-label="Permalink to &quot;使用差异&quot;">​</a></h2><p>由于 Fes.js 在 Vite 和 Webpack 上做了一层封装，开发者关心的构建配置不会太多。从使用上来说，主要存在以下几个差异点：</p><h3 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to &quot;配置&quot;">​</a></h3><p>Webpack 和 Vite 构建在配置方面有一些差异，具体可以查看<a href="./../reference/config/">配置</a>。</p><h3 id="静态文件处理" tabindex="-1">静态文件处理 <a class="header-anchor" href="#静态文件处理" aria-label="Permalink to &quot;静态文件处理&quot;">​</a></h3><p>由于 Vite 的限制，不支持 <code>require</code> 语法，具体 Vite 的用法可以查看<a href="https://cn.vitejs.dev/guide/assets.html" target="_blank" rel="noreferrer">官网</a></p><h3 id="html-模版" tabindex="-1">html 模版 <a class="header-anchor" href="#html-模版" aria-label="Permalink to &quot;html 模版&quot;">​</a></h3><p>html 模版比较常规的需求，例如模版变量，Webpack 和 Vite 之间没什么差异。如果有其他特殊的需求， Webpack 可以使用 <a href="https://github.com/jantimon/html-webpack-plugin" target="_blank" rel="noreferrer">html-webpack-plugin</a>，Vite 使用<a href="https://github.com/vbenjs/vite-plugin-html" target="_blank" rel="noreferrer">vite-plugin-html</a> 进行个性化配置。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>fes3.0+ html 模版文件从 <code>public/index.html</code> 挪到项目根目录。</p></div>',12),c=[l];function o(s,n,h,p,d,b){return a(),t("div",null,c)}const _=e(r,[["render",o]]);export{m as __pageData,_ as default};