mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 19:41:57 +08:00
108 lines
53 KiB
JavaScript
108 lines
53 KiB
JavaScript
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.b31a4d00.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/config/index.md"}'),o={name:"reference/config/index.md"},e=n(`<h2 id="配置文件" tabindex="-1">配置文件 <a class="header-anchor" href="#配置文件" aria-label="Permalink to "配置文件""></a></h2><p>Fes.js 内置了比较通用的构建方式，如果没有个性化需求，不需要修改构建相关的配置。</p><h3 id="配置文件解析" tabindex="-1">配置文件解析 <a class="header-anchor" href="#配置文件解析" aria-label="Permalink to "配置文件解析""></a></h3><p>Fes.js 会自动解析项目根目录下的 <code>.fes.js</code> 文件。</p><p>最基础的配置文件是这样的：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// .fes.js</span></span>
|
||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{};</span></span></code></pre></div><p>可以通过环境变量 <code>FES_ENV</code> 进行环境差异化配置，当我们运行 <code>FES_ENV=prod fes dev</code> 时，Fes.js 会找到 <code>.fes.js</code> 和 <code>.fes.prod.js</code>(可选) 的配置文件进行 <code>deepmerge</code>。</p><h3 id="配置智能提示" tabindex="-1">配置智能提示 <a class="header-anchor" href="#配置智能提示" aria-label="Permalink to "配置智能提示""></a></h3><p>可以通过 <code>defineBuildConfig</code> 工具函数获取类型提示：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">defineBuildConfig</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">defineBuildConfig</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="共享配置" tabindex="-1">共享配置 <a class="header-anchor" href="#共享配置" aria-label="Permalink to "共享配置""></a></h2><h3 id="alias" tabindex="-1">alias <a class="header-anchor" href="#alias" aria-label="Permalink to "alias""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>配置别名，对引用路径进行映射。</p></li><li><p>示例：</p></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">alias</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">main</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">src/assets/styles/main</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>然后 <code>import('main')</code>，实际上是 <code>import('src/assets/styles/main')</code>。</p><h3 id="autoprefixer" tabindex="-1">autoprefixer <a class="header-anchor" href="#autoprefixer" aria-label="Permalink to "autoprefixer""></a></h3><ul><li>类型： <code>object</code></li><li>默认值：</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">flexbox</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">no-2009</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><ul><li><p>详情：</p><p><a href="https://github.com/postcss/autoprefixer#options" target="_blank" rel="noreferrer">postcss autoprefixer 插件</a> 配置。</p></li></ul><h3 id="base" tabindex="-1">base <a class="header-anchor" href="#base" aria-label="Permalink to "base""></a></h3><ul><li><p>类型： <code>string</code></p></li><li><p>默认值： <code>''</code></p></li><li><p>详情：</p><p>设置路由前缀，通常用于部署到非根目录。比如你有路由 <code>/pageA</code>、<code>/pageB</code>，然后设置了 <code>base</code> 为 <code>/manage/</code>，那么就可以通过 <code>/manage/pageA</code>、<code>/manage/pageB</code> 访问到它们。</p></li></ul><div class="warning custom-block"><p class="custom-block-title">2.1.x 已废弃</p><p>2.1.x 版本请使用 router.base 代替</p></div><h3 id="builder" tabindex="-1">builder <a class="header-anchor" href="#builder" aria-label="Permalink to "builder""></a></h3><ul><li>类型： <code>string</code></li><li>默认值： 如果装了多个构建,需要通过 builder 指定具体使用哪个</li><li>详情： 比如 dev 用 vite，构建用 webpack</li><li>示例：</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">builder</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">webpack</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="define" tabindex="-1">define <a class="header-anchor" href="#define" aria-label="Permalink to "define""></a></h3><ul><li>类型： <code>object</code></li><li>默认值： <code>{}</code></li><li>详情： 用于提供给代码中可用的变量。</li><li>示例：</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">define</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">__DEV__</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">development</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>然后你代码里写 <code>console.log(__DEV__)</code>，会被编译成 <code>console.log('development')</code>。</p><h3 id="dynamicimport" tabindex="-1">dynamicImport <a class="header-anchor" href="#dynamicimport" aria-label="Permalink to "dynamicImport""></a></h3><ul><li><p>类型： <code>boolean</code></p></li><li><p>默认值： false</p></li><li><p>详情：</p><p>路由是否按需加载</p></li></ul><h3 id="inlinelimit" tabindex="-1">inlineLimit <a class="header-anchor" href="#inlinelimit" aria-label="Permalink to "inlineLimit""></a></h3><ul><li><p>类型： <code>number</code></p></li><li><p>默认值： <code>8192</code>(8k)</p></li><li><p>详情：</p><p>配置图片文件是否走 base64 编译的阈值。默认是 <code>8192</code> 字节，小于它会被编译为 base64 编码，否则会生成单独的文件。</p></li></ul><h3 id="globalcss" tabindex="-1">globalCSS <a class="header-anchor" href="#globalcss" aria-label="Permalink to "globalCSS""></a></h3><ul><li><p>类型： <code>beforeImports</code> | <code>afterImports</code></p></li><li><p>默认值： <code>afterImports</code></p></li><li><p>详情：</p><p>定义 globalCSS 的位置，处理一些 CSS 覆盖问题。</p></li></ul><h3 id="mock" tabindex="-1">mock <a class="header-anchor" href="#mock" aria-label="Permalink to "mock""></a></h3><ul><li><p>类型： <code>object || boolean</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>配置 mock 属性。</p><ul><li>当 mock 为 <code>boolean</code> 类型时，<code>true</code> 表示打开 mock，<code>false</code> 表示关闭 mock。</li><li>当 mock 为 <code>object</code> 类型时，默认打开 mock。也可以通过子属性 <code>prefix</code> 添加过滤条件，满足条件的走 mock 文件。</li></ul></li><li><p>示例：</p></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">prefix</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/api/auth</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>然后所有以 <code>/api/users</code> 开始的请求，就能进入 mock.js 文件处理，<a href="./../../guide/mock.html">mock.js 示例</a>。</p><h3 id="mountelementid" tabindex="-1">mountElementId <a class="header-anchor" href="#mountelementid" aria-label="Permalink to "mountElementId""></a></h3><ul><li><p>类型： <code>string</code></p></li><li><p>默认值： <code>app</code></p></li><li><p>详情：</p><p>指定渲染到的 HTML 元素 id。</p></li></ul><h3 id="outputpath" tabindex="-1">outputPath <a class="header-anchor" href="#outputpath" aria-label="Permalink to "outputPath""></a></h3><ul><li><p>类型： <code>string</code></p></li><li><p>默认值： <code>dist</code></p></li><li><p>详情：</p><p>指定输出路径。</p></li></ul><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>不允许设定为 <code>src</code>、<code>public</code>、<code>pages</code> 等约定目录。</p></div><h3 id="plugins" tabindex="-1">plugins <a class="header-anchor" href="#plugins" aria-label="Permalink to "plugins""></a></h3><ul><li><p>类型： <code>Array(string)</code></p></li><li><p>默认值： <code>[]</code></p></li><li><p>详情：</p><p>配置额外的 <code>fes</code> 插件。 数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。</p></li><li><p>示例：</p></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// npm 依赖</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">fes-plugin-hello</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 相对路径</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./plugin</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 绝对路径</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">\`\${</span><span style="color:#BABED8;">__dirname</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">/plugin.js</span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="proxy" tabindex="-1">proxy <a class="header-anchor" href="#proxy" aria-label="Permalink to "proxy""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>配置代理能力。</p></li><li><p>示例：</p></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">proxy</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">/v2</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">target</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">https://api.douban.com/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">changeOrigin</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>然后访问 <code>/v2/movie/in_theaters_proxy</code> 就能访问到 <a href="http://api.douban.com/v2/movie/in_theaters_proxy" target="_blank" rel="noreferrer">http://api.douban.com/v2/movie/in_theaters_proxy</a> 的数据。</p><h3 id="publicpath" tabindex="-1">publicPath <a class="header-anchor" href="#publicpath" aria-label="Permalink to "publicPath""></a></h3><ul><li><p>类型： <code>string</code></p></li><li><p>默认值： <code>/</code></p></li><li><p>详情：</p><p>静态资源 publicPath。当打包的时候在静态文件路径前面添加 <code>publicPath</code> 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 <code>publicPath</code> 的值设为 CDN 的值就可以。</p></li></ul><h3 id="router" tabindex="-1">router <a class="header-anchor" href="#router" aria-label="Permalink to "router""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{ mode: 'hash', base: '/' }</code></p></li><li><p>详情：</p><p>配置路由，具体请查看指南中关于路由的介绍</p></li></ul><h3 id="singular" tabindex="-1">singular <a class="header-anchor" href="#singular" aria-label="Permalink to "singular""></a></h3><ul><li><p>类型： <code>boolean</code></p></li><li><p>默认值： <code>false</code></p></li><li><p>详情：</p><p>配置是否启用单数模式的目录。 比如 <code>src/pages</code> 的约定在开启后为 <code>src/page</code> 目录，@fesjs/fes-plugins 插件也遵照此配置的约定。</p></li></ul><h3 id="targets" tabindex="-1">targets <a class="header-anchor" href="#targets" aria-label="Permalink to "targets""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。</p></li></ul><h3 id="terseroptions" tabindex="-1">terserOptions <a class="header-anchor" href="#terseroptions" aria-label="Permalink to "terserOptions""></a></h3><ul><li>类型： <code>object</code></li><li>默认值：</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> defaultTerserOptions </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">compress</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// turn off flags with small gains to speed up minification</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">arrows</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">collapse_vars</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// 0.3kb</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">comparisons</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">computed_props</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">hoist_funs</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">hoist_props</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">hoist_vars</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">inline</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">loops</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">negate_iife</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">properties</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">reduce_funcs</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">reduce_vars</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">switches</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">toplevel</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">typeofs</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// a few flags with noticeable gains/speed ratio</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// numbers based on out of the box vendor bundle</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">booleans</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// 0.7kb</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">if_return</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// 0.4kb</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">sequences</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// 0.7kb</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">unused</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// 2.3kb</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// required features to drop conditional branches</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">conditionals</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">dead_code</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">evaluate</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">mangle</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">safari10</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><ul><li><p>详情：</p><p>配置 <a href="https://github.com/terser/terser#minify-options" target="_blank" rel="noreferrer">压缩器 terser 的配置项</a></p></li></ul><h3 id="title" tabindex="-1">title <a class="header-anchor" href="#title" aria-label="Permalink to "title""></a></h3><ul><li><p>类型： <code>string</code></p></li><li><p>详情：</p><p>html 页面标题</p></li></ul><h2 id="webpack-专属配置" tabindex="-1">webpack 专属配置 <a class="header-anchor" href="#webpack-专属配置" aria-label="Permalink to "webpack 专属配置""></a></h2><h3 id="analyze" tabindex="-1">analyze <a class="header-anchor" href="#analyze" aria-label="Permalink to "analyze""></a></h3><ul><li>类型： <code>object</code></li><li>默认值：</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">analyzerMode</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">process</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">env</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">ANALYZE_MODE</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">server</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">analyzerPort</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">process</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">env</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">ANALYZE_PORT</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">8888</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">openAnalyzer</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">process</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">env</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">ANALYZE_OPEN</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!==</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// generate stats file while ANALYZE_DUMP exist</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">generateStatsFile</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!!</span><span style="color:#BABED8;">process</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">env</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">ANALYZE_DUMP</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">statsFilename</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">process</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">env</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">ANALYZE_DUMP</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">stats.json</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">logLevel</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">process</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">env</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">ANALYZE_LOG_LEVEL</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">info</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">defaultSizes</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">parsed</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// stat // gzip</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><ul><li><p>详情：</p><p>构建结果分析，当配置 <code>p<wbr>rocess.env.ANALYZE</code> 时开启，例如执行<code>ANALYZE=1 fes build</code></p></li></ul><h3 id="chainwebpack" tabindex="-1">chainWebpack <a class="header-anchor" href="#chainwebpack" aria-label="Permalink to "chainWebpack""></a></h3><ul><li><p>类型：<code>function</code></p></li><li><p>默认值：<code>null</code></p></li><li><p>详情：</p><p>通过 <a href="https://github.com/sorrycc/webpack-chain#readme" target="_blank" rel="noreferrer">webpack-chain</a> 的 API 修改 webpack 配置。</p></li></ul><p>示例：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">chainWebpack</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">memo</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">env</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">webpack</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 删除 fes 内置插件</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">memo</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">delete</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">copy</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="cssloader" tabindex="-1">cssLoader <a class="header-anchor" href="#cssloader" aria-label="Permalink to "cssLoader""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>''</code></p></li><li><p>详情：</p><p>设置 <a href="https://github.com/webpack-contrib/css-loader#options" target="_blank" rel="noreferrer">css-loader 配置项</a>。</p></li></ul><h3 id="copy" tabindex="-1">copy <a class="header-anchor" href="#copy" aria-label="Permalink to "copy""></a></h3><ul><li><p>类型： <code>Array(string) || Array(object)</code></p></li><li><p>默认值： <code>[]</code></p></li><li><p>详情：</p><p>设置要复制到输出目录的文件、文件夹。</p><p>配置约定 <code>from-to</code> 规则， 其中 <code>from</code> 是相对于 <code>cwd</code> 的路径，<code>to</code> 是相对于输出路径的路径。</p></li><li><p>示例：</p></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">copy</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">from</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/src/assets/images</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">to</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">assets/images</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>上面示例中，实现了将 <code>cwd</code> 路径中的 <code>/src/assets/images</code> 文件夹，在编译完成后，<code>copy</code> 到输出路径下的 <code>assets/images</code> 文件夹。</p><h3 id="devserver" tabindex="-1">devServer <a class="header-anchor" href="#devserver" aria-label="Permalink to "devServer""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>配置开发服务器。支持以下子配置项：</p><ul><li>port，端口号，默认 <code>8000</code></li><li>host，默认 <code>localhost</code></li><li>https，是否启用 https server，同时也会开启 HTTP/2</li></ul><p>启用 port 和 host 也可以通过环境变量 <code>PORT</code> 和 <code>HOST</code> 临时指定。</p></li></ul><h3 id="devtool" tabindex="-1">devtool <a class="header-anchor" href="#devtool" aria-label="Permalink to "devtool""></a></h3><ul><li><p>类型： <code>string</code></p></li><li><p>默认值： <code>cheap-module-source-map</code> in dev, <code>undefined</code> in build</p></li><li><p>详情：</p><p>用户配置 sourcemap 类型。详见 <a href="https://webpack.js.org/configuration/devtool/#devtool" target="_blank" rel="noreferrer"> webpack#devtool 配置</a>。</p></li></ul><h3 id="extracss" tabindex="-1">extraCSS <a class="header-anchor" href="#extracss" aria-label="Permalink to "extraCSS""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>配置如何使用<code>mini-css-extract-plugin</code>，默认使用插件的默认配置。<code>loader</code> 选项对应 loader 参数，<code>plugin</code>选项对应插件参数。例如：</p></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 配置 mini-css-extract-plugin</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">extraCSS</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">loader</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">resourcePath</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">context</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">\`\${</span><span style="color:#BABED8;">path</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">relative</span><span style="color:#BABED8;">(path</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">dirname</span><span style="color:#BABED8;">(resourcePath)</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> context)</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="exportstatic" tabindex="-1">exportStatic <a class="header-anchor" href="#exportstatic" aria-label="Permalink to "exportStatic""></a></h3><ul><li>类型： <code>object</code></li><li>默认值： <code>{}</code></li><li>详情：</li></ul><p>配置 <code>html</code> 的输出形式，默认只输出 <code>index.html</code>。</p><p>如果开启 <code>exportStatic</code>，则会针对每个路由输出 <code>html</code> 文件。</p><p>比如以下路由，</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">/</span></span>
|
||
<span class="line"><span style="color:#babed8;">/users</span></span>
|
||
<span class="line"><span style="color:#babed8;">/list</span></span></code></pre></div><p>不开启 <code>exportStatic</code> 时，输出，</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">- index.html</span></span></code></pre></div><p>设置 <code>exportStatic: {}</code> 后，输出，</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">- index.html</span></span>
|
||
<span class="line"><span style="color:#babed8;">- users.html</span></span>
|
||
<span class="line"><span style="color:#babed8;">- list.html</span></span></code></pre></div><h3 id="externals" tabindex="-1">externals <a class="header-anchor" href="#externals" aria-label="Permalink to "externals""></a></h3><ul><li><p>类型：<code>object</code></p></li><li><p>默认值：<code>{}</code></p></li><li><p>详情：</p><p>设置哪些模块可以不被打包，通过 <code><script></code> 或其他方式引入。</p></li></ul><p>示例：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">externals</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">vue</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">window.Vue</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="extrababelplugins" tabindex="-1">extraBabelPlugins <a class="header-anchor" href="#extrababelplugins" aria-label="Permalink to "extraBabelPlugins""></a></h3><ul><li>类型： <code>array</code></li><li>默认值： <code>[]</code></li><li>详情：</li></ul><p>配置额外的 <code>babel</code> 插件。</p><ul><li>示例：</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">extraBabelPlugins</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [[</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">import</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">libraryName</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ant-design-vue</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">libraryDirectory</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">es</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">css</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">]]</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="extrababelpresets" tabindex="-1">extraBabelPresets <a class="header-anchor" href="#extrababelpresets" aria-label="Permalink to "extraBabelPresets""></a></h3><ul><li>类型： <code>array</code></li><li>默认值： <code>[]</code></li><li>详情：</li></ul><p>配置额外的 <code>babel</code> 插件集。</p><h3 id="extrapostcssplugins" tabindex="-1">extraPostCSSPlugins <a class="header-anchor" href="#extrapostcssplugins" aria-label="Permalink to "extraPostCSSPlugins""></a></h3><ul><li><p>类型： <code>array</code></p></li><li><p>默认值： <code>[]</code></p></li><li><p>详情：</p><p>设置额外的 <a href="https://github.com/postcss/postcss/blob/master/docs/plugins.md" target="_blank" rel="noreferrer">postcss 插件</a>。</p></li></ul><h3 id="html" tabindex="-1">html <a class="header-anchor" href="#html" aria-label="Permalink to "html""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>设置<a href="https://github.com/jantimon/html-webpack-plugin#options" target="_blank" rel="noreferrer">html-webpack-plugin</a>。</p></li></ul><h3 id="lessloader" tabindex="-1">lessLoader <a class="header-anchor" href="#lessloader" aria-label="Permalink to "lessLoader""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>设置 <a href="https://github.com/webpack-contrib/less-loader" target="_blank" rel="noreferrer">less-loader 配置项</a>。</p></li></ul><h3 id="nodemodulestransform" tabindex="-1">nodeModulesTransform <a class="header-anchor" href="#nodemodulestransform" aria-label="Permalink to "nodeModulesTransform""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{ exclude: [] }</code></p></li><li><p>详情：</p><p>默认编译所有 <code>node_modules</code> 下的包，可以通过配置 <code>exclude</code> 来跳过某些包，以提高编译速度。</p></li></ul><h3 id="postcssloader" tabindex="-1">postcssLoader <a class="header-anchor" href="#postcssloader" aria-label="Permalink to "postcssLoader""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{}</code></p></li><li><p>详情：</p><p>设置 <a href="https://github.com/postcss/postcss-loader#options" target="_blank" rel="noreferrer">postcss-loader 配置项</a>。</p></li></ul><h3 id="vueloader" tabindex="-1">vueLoader <a class="header-anchor" href="#vueloader" aria-label="Permalink to "vueLoader""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值：<code>{}</code></p></li><li><p>详情：</p><p>配置 <a href="https://vue-loader.vuejs.org/zh/options.html" target="_blank" rel="noreferrer">Vue Loader</a></p></li></ul><h2 id="vite-专属配置" tabindex="-1">Vite 专属配置 <a class="header-anchor" href="#vite-专属配置" aria-label="Permalink to "Vite 专属配置""></a></h2><h3 id="viteoption" tabindex="-1">viteOption <a class="header-anchor" href="#viteoption" aria-label="Permalink to "viteOption""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>详情：</p><p>Vite 的配置，详情请看 <a href="https://cn.vitejs.dev/config/" target="_blank" rel="noreferrer">Vite Config</a></p></li></ul><h3 id="vitevueplugin" tabindex="-1">viteVuePlugin <a class="header-anchor" href="#vitevueplugin" aria-label="Permalink to "viteVuePlugin""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>详情：</p><p>自定义 <a href="https://github.com/vitejs/vite/tree/main/packages/plugin-vue" target="_blank" rel="noreferrer">@vitejs/plugin-vue</a> 的配置。</p></li></ul><h3 id="vitevuejsx" tabindex="-1">viteVueJsx <a class="header-anchor" href="#vitevuejsx" aria-label="Permalink to "viteVueJsx""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>详情：</p><p>自定义 <a href="https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx" target="_blank" rel="noreferrer">@vitejs/plugin-vue-jsx</a> 的配置。</p></li></ul><h3 id="vitelegacy" tabindex="-1">viteLegacy <a class="header-anchor" href="#vitelegacy" aria-label="Permalink to "viteLegacy""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>详情：</p><p>自定义 <a href="https://github.com/vitejs/vite/tree/main/packages/plugin-legacy" target="_blank" rel="noreferrer">@vitejs/plugin-legacy</a> 的配置。</p></li></ul><h3 id="vitehtml" tabindex="-1">viteHtml <a class="header-anchor" href="#vitehtml" aria-label="Permalink to "viteHtml""></a></h3><ul><li><p>类型： <code>object</code></p></li><li><p>详情：</p><p>自定义 <a href="https://github.com/vbenjs/vite-plugin-html" target="_blank" rel="noreferrer">vite-plugin-html</a> 的配置。</p></li></ul><h2 id="更多配置项" tabindex="-1">更多配置项 <a class="header-anchor" href="#更多配置项" aria-label="Permalink to "更多配置项""></a></h2><p>Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。</p>`,134),p=[e];function t(c,r,i,D,y,F){return a(),l("div",null,p)}const B=s(o,[["render",t]]);export{u as __pageData,B as default};
|