fes.js/assets/index.html.a2d6e9e6.js

import{_ as p,r as o,o as l,c as i,b as n,d as s,a as e,f as t}from"./app.bd9c95b7.js";const c={},r=t(`<h2 id="配置文件" tabindex="-1"><a class="header-anchor" href="#配置文件" aria-hidden="true">#</a> 配置文件</h2><p>Fes.js 内置了比较通用的构建方式，如果没有个性化需求，不需要修改构建相关的配置。</p><h3 id="配置文件解析" tabindex="-1"><a class="header-anchor" href="#配置文件解析" aria-hidden="true">#</a> 配置文件解析</h3><p>Fes.js 会自动解析项目根目录下的 <code>.fes.js</code> 文件。</p><p>最基础的配置文件是这样的：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></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-hidden="true">#</a> 配置智能提示</h3><p>可以通过 <code>defineBuildConfig</code> 工具函数获取类型提示：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineBuildConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineBuildConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="共享配置" tabindex="-1"><a class="header-anchor" href="#共享配置" aria-hidden="true">#</a> 共享配置</h2><h3 id="alias" tabindex="-1"><a class="header-anchor" href="#alias" aria-hidden="true">#</a> alias</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-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token string">&#39;src/assets/styles/main&#39;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后 <code>import(&#39;main&#39;)</code>，实际上是 <code>import(&#39;src/assets/styles/main&#39;)</code>。</p><h3 id="autoprefixer" tabindex="-1"><a class="header-anchor" href="#autoprefixer" aria-hidden="true">#</a> autoprefixer</h3><ul><li>类型： <code>object</code></li><li>默认值：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
    <span class="token literal-property property">flexbox</span><span class="token operator">:</span> <span class="token string">&#39;no-2009&#39;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,18),d=n("p",null,"详情：",-1),u={href:"https://github.com/postcss/autoprefixer#options",target:"_blank",rel:"noopener noreferrer"},k=t(`<h3 id="base" tabindex="-1"><a class="header-anchor" href="#base" aria-hidden="true">#</a> base</h3><ul><li><p>类型： <code>string</code></p></li><li><p>默认值： <code>&#39;&#39;</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="custom-container warning"><p class="custom-container-title">2.1.x 已废弃</p><p>2.1.x 版本请使用 router.base 代替</p></div><h3 id="define" tabindex="-1"><a class="header-anchor" href="#define" aria-hidden="true">#</a> define</h3><ul><li>类型： <code>object</code></li><li>默认值： <code>{}</code></li><li>详情： 用于提供给代码中可用的变量。</li><li>示例：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">define</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">__DEV__</span><span class="token operator">:</span> <span class="token string">&#39;development&#39;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后你代码里写 <code>console.log(__DEV__)</code>，会被编译成 <code>console.log(&#39;development&#39;)</code>。</p><h3 id="dynamicimport" tabindex="-1"><a class="header-anchor" href="#dynamicimport" aria-hidden="true">#</a> dynamicImport</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"><a class="header-anchor" href="#inlinelimit" aria-hidden="true">#</a> inlineLimit</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="mock" tabindex="-1"><a class="header-anchor" href="#mock" aria-hidden="true">#</a> mock</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-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">&#39;/api/auth&#39;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后所有以 <code>/api/users</code> 开始的请求，就能进入 mock.js 文件处理，<a href="../../guide/mock">mock.js 示例</a>。</p><h3 id="mountelementid" tabindex="-1"><a class="header-anchor" href="#mountelementid" aria-hidden="true">#</a> mountElementId</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"><a class="header-anchor" href="#outputpath" aria-hidden="true">#</a> outputPath</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="custom-container tip"><p class="custom-container-title">提示</p><p>不允许设定为 <code>src</code>、<code>public</code>、<code>pages</code> 等约定目录。</p></div><h3 id="plugins" tabindex="-1"><a class="header-anchor" href="#plugins" aria-hidden="true">#</a> plugins</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-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token comment">// npm 依赖</span>
        <span class="token string">&#39;fes-plugin-hello&#39;</span><span class="token punctuation">,</span>
        <span class="token comment">// 相对路径</span>
        <span class="token string">&#39;./plugin&#39;</span><span class="token punctuation">,</span>
        <span class="token comment">// 绝对路径</span>
        <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>__dirname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/plugin.js</span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="proxy" tabindex="-1"><a class="header-anchor" href="#proxy" aria-hidden="true">#</a> proxy</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-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string-property property">&#39;/v2&#39;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">&#39;https://api.douban.com/&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">changeOrigin</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,26),h=n("code",null,"/v2/movie/in_theaters_proxy",-1),v={href:"http://api.douban.com/v2/movie/in_theaters_proxy",target:"_blank",rel:"noopener noreferrer"},b=t(`<h3 id="publicpath" tabindex="-1"><a class="header-anchor" href="#publicpath" aria-hidden="true">#</a> publicPath</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"><a class="header-anchor" href="#router" aria-hidden="true">#</a> router</h3><ul><li><p>类型： <code>object</code></p></li><li><p>默认值： <code>{ mode: &#39;hash&#39;, base: &#39;/&#39; }</code></p></li><li><p>详情：</p><p>配置路由，具体请查看指南中关于路由的介绍</p></li></ul><h3 id="singular" tabindex="-1"><a class="header-anchor" href="#singular" aria-hidden="true">#</a> singular</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"><a class="header-anchor" href="#targets" aria-hidden="true">#</a> targets</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"><a class="header-anchor" href="#terseroptions" aria-hidden="true">#</a> terserOptions</h3><ul><li>类型： <code>object</code></li><li>默认值：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> defaultTerserOptions <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">compress</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// turn off flags with small gains to speed up minification</span>
        <span class="token literal-property property">arrows</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">collapse_vars</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 0.3kb</span>
        <span class="token literal-property property">comparisons</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">computed_props</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">hoist_funs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">hoist_props</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">hoist_vars</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">inline</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">loops</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">negate_iife</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">reduce_funcs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">reduce_vars</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">switches</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">toplevel</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">typeofs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>

        <span class="token comment">// a few flags with noticeable gains/speed ratio</span>
        <span class="token comment">// numbers based on out of the box vendor bundle</span>
        <span class="token literal-property property">booleans</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 0.7kb</span>
        <span class="token literal-property property">if_return</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 0.4kb</span>
        <span class="token literal-property property">sequences</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 0.7kb</span>
        <span class="token literal-property property">unused</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 2.3kb</span>

        <span class="token comment">// required features to drop conditional branches</span>
        <span class="token literal-property property">conditionals</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">dead_code</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">evaluate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">mangle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">safari10</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,11),m=n("p",null,"详情：",-1),g={href:"https://github.com/terser/terser#minify-options",target:"_blank",rel:"noopener noreferrer"},_=t(`<h3 id="title" tabindex="-1"><a class="header-anchor" href="#title" aria-hidden="true">#</a> title</h3><ul><li><p>类型： <code>string</code></p></li><li><p>详情：</p><p>html 页面标题</p></li></ul><h2 id="webpack-专属配置" tabindex="-1"><a class="header-anchor" href="#webpack-专属配置" aria-hidden="true">#</a> webpack 专属配置</h2><h3 id="analyze" tabindex="-1"><a class="header-anchor" href="#analyze" aria-hidden="true">#</a> analyze</h3><ul><li>类型： <code>object</code></li><li>默认值：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
    <span class="token literal-property property">analyzerMode</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_MODE</span> <span class="token operator">||</span> <span class="token string">&#39;server&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">analyzerPort</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_PORT</span> <span class="token operator">||</span> <span class="token number">8888</span><span class="token punctuation">,</span>
    <span class="token literal-property property">openAnalyzer</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_OPEN</span> <span class="token operator">!==</span> <span class="token string">&#39;none&#39;</span><span class="token punctuation">,</span>
    <span class="token comment">// generate stats file while ANALYZE_DUMP exist</span>
    <span class="token literal-property property">generateStatsFile</span><span class="token operator">:</span> <span class="token operator">!</span><span class="token operator">!</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_DUMP</span><span class="token punctuation">,</span>
    <span class="token literal-property property">statsFilename</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_DUMP</span> <span class="token operator">||</span> <span class="token string">&#39;stats.json&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">logLevel</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_LOG_LEVEL</span> <span class="token operator">||</span> <span class="token string">&#39;info&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">defaultSizes</span><span class="token operator">:</span> <span class="token string">&#39;parsed&#39;</span> <span class="token comment">// stat  // gzip</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></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"><a class="header-anchor" href="#chainwebpack" aria-hidden="true">#</a> chainWebpack</h3>`,8),f=n("li",null,[n("p",null,[s("类型："),n("code",null,"function")])],-1),y=n("li",null,[n("p",null,[s("默认值："),n("code",null,"null")])],-1),x=n("p",null,"详情：",-1),j={href:"https://github.com/neutrinojs/webpack-chain",target:"_blank",rel:"noopener noreferrer"},w=t(`<p>示例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">memo<span class="token punctuation">,</span> <span class="token punctuation">{</span> env<span class="token punctuation">,</span> webpack <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 删除 fes 内置插件</span>
        memo<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">&#39;copy&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="cssloader" tabindex="-1"><a class="header-anchor" href="#cssloader" aria-hidden="true">#</a> cssLoader</h3>`,3),A=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),E=n("li",null,[n("p",null,[s("默认值： "),n("code",null,"''")])],-1),L=n("p",null,"详情：",-1),P={href:"https://github.com/webpack-contrib/css-loader#options",target:"_blank",rel:"noopener noreferrer"},N=t(`<h3 id="copy" tabindex="-1"><a class="header-anchor" href="#copy" aria-hidden="true">#</a> copy</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-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">copy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">from</span><span class="token operator">:</span> <span class="token string">&#39;/src/assets/images&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">to</span><span class="token operator">:</span> <span class="token string">&#39;assets/images&#39;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>上面示例中，实现了将 <code>cwd</code> 路径中的 <code>/src/assets/images</code> 文件夹，在编译完成后，<code>copy</code> 到输出路径下的 <code>assets/images</code> 文件夹。</p><h3 id="devserver" tabindex="-1"><a class="header-anchor" href="#devserver" aria-hidden="true">#</a> devServer</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"><a class="header-anchor" href="#devtool" aria-hidden="true">#</a> devtool</h3>`,7),V=n("li",null,[n("p",null,[s("类型： "),n("code",null,"string")])],-1),S=n("li",null,[n("p",null,[s("默认值： "),n("code",null,"cheap-module-source-map"),s(" in dev, "),n("code",null,"undefined"),s(" in build")])],-1),B=n("p",null,"详情：",-1),O={href:"https://webpack.js.org/configuration/devtool/#devtool",target:"_blank",rel:"noopener noreferrer"},z=t(`<h3 id="exportstatic" tabindex="-1"><a class="header-anchor" href="#exportstatic" aria-hidden="true">#</a> exportStatic</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-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>/
/users
/list
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>不开启 <code>exportStatic</code> 时，输出，</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>- index.html
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>设置 <code>exportStatic: {}</code> 后，输出，</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>- index.html
- users.html
- list.html
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="externals" tabindex="-1"><a class="header-anchor" href="#externals" aria-hidden="true">#</a> externals</h3><ul><li><p>类型：<code>object</code></p></li><li><p>默认值：<code>{}</code></p></li><li><p>详情：</p><p>设置哪些模块可以不被打包，通过 <code>&lt;script&gt;</code> 或其他方式引入。</p></li></ul><p>示例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">externals</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">vue</span><span class="token operator">:</span> <span class="token string">&#39;window.Vue&#39;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="extrababelplugins" tabindex="-1"><a class="header-anchor" href="#extrababelplugins" aria-hidden="true">#</a> extraBabelPlugins</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-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">extraBabelPlugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">&#39;import&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">libraryName</span><span class="token operator">:</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">libraryDirectory</span><span class="token operator">:</span> <span class="token string">&#39;es&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">&#39;css&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="extrababelpresets" tabindex="-1"><a class="header-anchor" href="#extrababelpresets" aria-hidden="true">#</a> extraBabelPresets</h3><ul><li>类型： <code>array</code></li><li>默认值： <code>[]</code></li><li>详情：</li></ul><p>配置额外的 <code>babel</code> 插件集。</p><h3 id="extrapostcssplugins" tabindex="-1"><a class="header-anchor" href="#extrapostcssplugins" aria-hidden="true">#</a> extraPostCSSPlugins</h3>`,23),D=n("li",null,[n("p",null,[s("类型： "),n("code",null,"array")])],-1),T=n("li",null,[n("p",null,[s("默认值： "),n("code",null,"[]")])],-1),Y=n("p",null,"详情：",-1),Z={href:"https://github.com/postcss/postcss/blob/master/docs/plugins.md",target:"_blank",rel:"noopener noreferrer"},C=n("h3",{id:"html",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#html","aria-hidden":"true"},"#"),s(" html")],-1),F=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),M=n("li",null,[n("p",null,[s("默认值： "),n("code",null,"{}")])],-1),I=n("p",null,"详情：",-1),H={href:"https://github.com/jantimon/html-webpack-plugin#options",target:"_blank",rel:"noopener noreferrer"},U=n("h3",{id:"lessloader",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#lessloader","aria-hidden":"true"},"#"),s(" lessLoader")],-1),q=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),R=n("li",null,[n("p",null,[s("默认值： "),n("code",null,"{}")])],-1),W=n("p",null,"详情：",-1),G={href:"https://github.com/webpack-contrib/less-loader",target:"_blank",rel:"noopener noreferrer"},J=t('<h3 id="nodemodulestransform" tabindex="-1"><a class="header-anchor" href="#nodemodulestransform" aria-hidden="true">#</a> nodeModulesTransform</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"><a class="header-anchor" href="#postcssloader" aria-hidden="true">#</a> postcssLoader</h3>',3),$=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),K=n("li",null,[n("p",null,[s("默认值： "),n("code",null,"{}")])],-1),Q=n("p",null,"详情：",-1),X={href:"https://github.com/postcss/postcss-loader#options",target:"_blank",rel:"noopener noreferrer"},nn=n("h3",{id:"vueloader",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vueloader","aria-hidden":"true"},"#"),s(" vueLoader")],-1),sn=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),an=n("li",null,[n("p",null,[s("默认值："),n("code",null,"{}")])],-1),en=n("p",null,"详情：",-1),tn={href:"https://vue-loader.vuejs.org/zh/options.html",target:"_blank",rel:"noopener noreferrer"},pn=n("h2",{id:"vite-专属配置",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vite-专属配置","aria-hidden":"true"},"#"),s(" Vite 专属配置")],-1),on=n("h3",{id:"viteoption",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#viteoption","aria-hidden":"true"},"#"),s(" viteOption")],-1),ln=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),cn=n("p",null,"详情：",-1),rn={href:"https://cn.vitejs.dev/config/",target:"_blank",rel:"noopener noreferrer"},dn=n("h3",{id:"vitevueplugin",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vitevueplugin","aria-hidden":"true"},"#"),s(" viteVuePlugin")],-1),un=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),kn=n("p",null,"详情：",-1),hn={href:"https://github.com/vitejs/vite/tree/main/packages/plugin-vue",target:"_blank",rel:"noopener noreferrer"},vn=n("h3",{id:"vitevuejsx",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vitevuejsx","aria-hidden":"true"},"#"),s(" viteVueJsx")],-1),bn=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),mn=n("p",null,"详情：",-1),gn={href:"https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx",target:"_blank",rel:"noopener noreferrer"},_n=n("h3",{id:"vitelegacy",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vitelegacy","aria-hidden":"true"},"#"),s(" viteLegacy")],-1),fn=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),yn=n("p",null,"详情：",-1),xn={href:"https://github.com/vitejs/vite/tree/main/packages/plugin-legacy",target:"_blank",rel:"noopener noreferrer"},jn=n("h3",{id:"vitehtml",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vitehtml","aria-hidden":"true"},"#"),s(" viteHtml")],-1),wn=n("li",null,[n("p",null,[s("类型： "),n("code",null,"object")])],-1),An=n("p",null,"详情：",-1),En={href:"https://github.com/vbenjs/vite-plugin-html",target:"_blank",rel:"noopener noreferrer"},Ln=n("h2",{id:"更多配置项",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#更多配置项","aria-hidden":"true"},"#"),s(" 更多配置项")],-1),Pn=n("p",null,"Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。",-1);function Nn(Vn,Sn){const a=o("ExternalLinkIcon");return l(),i("div",null,[r,n("ul",null,[n("li",null,[d,n("p",null,[n("a",u,[s("postcss autoprefixer 插件"),e(a)]),s(" 配置。")])])]),k,n("p",null,[s("然后访问 "),h,s(" 就能访问到 "),n("a",v,[s("http://api.douban.com/v2/movie/in_theaters_proxy"),e(a)]),s(" 的数据。")]),b,n("ul",null,[n("li",null,[m,n("p",null,[s("配置 "),n("a",g,[s("压缩器 terser 的配置项"),e(a)])])])]),_,n("ul",null,[f,y,n("li",null,[x,n("p",null,[s("通过 "),n("a",j,[s("webpack-chain"),e(a)]),s(" 的 API 修改 webpack 配置。")])])]),w,n("ul",null,[A,E,n("li",null,[L,n("p",null,[s("设置 "),n("a",P,[s("css-loader 配置项"),e(a)]),s("。")])])]),N,n("ul",null,[V,S,n("li",null,[B,n("p",null,[s("用户配置 sourcemap 类型。详见 "),n("a",O,[s(" webpack#devtool 配置"),e(a)]),s("。")])])]),z,n("ul",null,[D,T,n("li",null,[Y,n("p",null,[s("设置额外的 "),n("a",Z,[s("postcss 插件"),e(a)]),s("。")])])]),C,n("ul",null,[F,M,n("li",null,[I,n("p",null,[s("设置"),n("a",H,[s("html-webpack-plugin"),e(a)]),s("。")])])]),U,n("ul",null,[q,R,n("li",null,[W,n("p",null,[s("设置 "),n("a",G,[s("less-loader 配置项"),e(a)]),s("。")])])]),J,n("ul",null,[$,K,n("li",null,[Q,n("p",null,[s("设置 "),n("a",X,[s("postcss-loader 配置项"),e(a)]),s("。")])])]),nn,n("ul",null,[sn,an,n("li",null,[en,n("p",null,[s("配置 "),n("a",tn,[s("Vue Loader"),e(a)])])])]),pn,on,n("ul",null,[ln,n("li",null,[cn,n("p",null,[s("Vite 的配置，详情请看 "),n("a",rn,[s("Vite Config"),e(a)])])])]),dn,n("ul",null,[un,n("li",null,[kn,n("p",null,[s("自定义 "),n("a",hn,[s("@vitejs/plugin-vue"),e(a)]),s(" 的配置。")])])]),vn,n("ul",null,[bn,n("li",null,[mn,n("p",null,[s("自定义 "),n("a",gn,[s("@vitejs/plugin-vue-jsx"),e(a)]),s(" 的配置。")])])]),_n,n("ul",null,[fn,n("li",null,[yn,n("p",null,[s("自定义 "),n("a",xn,[s("@vitejs/plugin-legacy"),e(a)]),s(" 的配置。")])])]),jn,n("ul",null,[wn,n("li",null,[An,n("p",null,[s("自定义 "),n("a",En,[s("vite-plugin-html"),e(a)]),s(" 的配置。")])])]),Ln,Pn])}const On=p(c,[["render",Nn],["__file","index.html.vue"]]);export{On as default};