import{_ as s,o as a,c as l,V as n}from"./chunks/framework.c1e1f082.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/config/index.md"}'),o={name:"reference/config/index.md"},e=n(`

配置文件 ​

Fes.js 内置了比较通用的构建方式，如果没有个性化需求，不需要修改构建相关的配置。

配置文件解析 ​

Fes.js 会自动解析项目根目录下的 .fes.js 文件。

最基础的配置文件是这样的：

js
// .fes.js
export default {};

可以通过环境变量 FES_ENV 进行环境差异化配置，当我们运行 FES_ENV=prod fes dev 时，Fes.js 会找到 .fes.js 和 .fes.prod.js(可选) 的配置文件进行 deepmerge。

配置智能提示 ​

可以通过 defineBuildConfig 工具函数获取类型提示：

js
import { defineBuildConfig } from '@fesjs/fes';

export default defineBuildConfig({});

共享配置 ​

alias ​

js
export default {
    alias: {
        main: 'src/assets/styles/main',
    },
};

然后 import('main')，实际上是 import('src/assets/styles/main')。

autoprefixer ​

js
{
    flexbox: 'no-2009';
}

base ​

2.1.x 已废弃

2.1.x 版本请使用 router.base 代替

builder ​

js
export default {
    builder: 'webpack',
};

define ​

js
export default {
    define: {
        __DEV__: 'development',
    },
};

然后你代码里写 console.log(__DEV__)，会被编译成 console.log('development')。

dynamicImport ​

inlineLimit ​

globalCSS ​

mock ​

js
export default {
    mock: {
        prefix: '/api/auth',
    },
};

然后所有以 /api/users 开始的请求，就能进入 mock.js 文件处理，mock.js 示例。

mountElementId ​

outputPath ​

TIP

不允许设定为 src、public、pages 等约定目录。

plugins ​

js
export default {
    plugins: [
        // npm 依赖
        'fes-plugin-hello',
        // 相对路径
        './plugin',
        // 绝对路径
        \`\${__dirname}/plugin.js\`,
    ],
};

proxy ​

js
export default {
    proxy: {
        '/v2': {
            target: 'https://api.douban.com/',
            changeOrigin: true,
        },
    },
};

然后访问 /v2/movie/in_theaters_proxy 就能访问到 http://api.douban.com/v2/movie/in_theaters_proxy 的数据。

publicPath ​

router ​

singular ​

targets ​

terserOptions ​

js
const defaultTerserOptions = {
    compress: {
        // turn off flags with small gains to speed up minification
        arrows: false,
        collapse_vars: false, // 0.3kb
        comparisons: false,
        computed_props: false,
        hoist_funs: false,
        hoist_props: false,
        hoist_vars: false,
        inline: false,
        loops: false,
        negate_iife: false,
        properties: false,
        reduce_funcs: false,
        reduce_vars: false,
        switches: false,
        toplevel: false,
        typeofs: false,

        // a few flags with noticeable gains/speed ratio
        // numbers based on out of the box vendor bundle
        booleans: true, // 0.7kb
        if_return: true, // 0.4kb
        sequences: true, // 0.7kb
        unused: true, // 2.3kb

        // required features to drop conditional branches
        conditionals: true,
        dead_code: true,
        evaluate: true,
    },
    mangle: {
        safari10: true,
    },
};

title ​

webpack 专属配置 ​

analyze ​

js
{
    analyzerMode: process.env.ANALYZE_MODE || 'server',
    analyzerPort: process.env.ANALYZE_PORT || 8888,
    openAnalyzer: process.env.ANALYZE_OPEN !== 'none',
    // generate stats file while ANALYZE_DUMP exist
    generateStatsFile: !!process.env.ANALYZE_DUMP,
    statsFilename: process.env.ANALYZE_DUMP || 'stats.json',
    logLevel: process.env.ANALYZE_LOG_LEVEL || 'info',
    defaultSizes: 'parsed' // stat  // gzip
}

chainWebpack ​

示例：

js
export default {
    chainWebpack(memo, { env, webpack }) {
        // 删除 fes 内置插件
        memo.plugins.delete('copy');
    },
};

cssLoader ​

copy ​

js
export default {
    copy: {
        from: '/src/assets/images',
        to: 'assets/images',
    },
};

上面示例中，实现了将 cwd 路径中的 /src/assets/images 文件夹，在编译完成后，copy 到输出路径下的 assets/images 文件夹。

devServer ​

devtool ​

extraCSS ​

js
export default {
    // 配置 mini-css-extract-plugin
    extraCSS: {
        loader: {
            publicPath: (resourcePath, context) => \`\${path.relative(path.dirname(resourcePath), context)}/\`,
        },
    },
};

exportStatic ​

配置 html 的输出形式，默认只输出 index.html。

如果开启 exportStatic，则会针对每个路由输出 html 文件。

比如以下路由，

/
/users
/list

不开启 exportStatic 时，输出，

- index.html

设置 exportStatic: {} 后，输出，

- index.html
- users.html
- list.html

externals ​

示例：

js
export default {
    externals: {
        vue: 'window.Vue',
    },
};

extraBabelPlugins ​

配置额外的 babel 插件。

js
export default {
    extraBabelPlugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]],
};

extraBabelPresets ​

配置额外的 babel 插件集。

extraPostCSSPlugins ​

html ​

lessLoader ​

nodeModulesTransform ​

postcssLoader ​

vueLoader ​

Vite 专属配置 ​

viteOption ​

viteVuePlugin ​

viteVueJsx ​

viteLegacy ​

viteHtml ​

更多配置项 ​

Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。

`,134),p=[e];function t(c,r,i,D,y,F){return a(),l("div",null,p)}const A=s(o,[["render",t]]);export{C as __pageData,A as default};