diff --git a/docs/.vuepress/configs/navbar/zh.ts b/docs/.vuepress/configs/navbar/zh.ts index f6e85ca7..a1ffea4d 100644 --- a/docs/.vuepress/configs/navbar/zh.ts +++ b/docs/.vuepress/configs/navbar/zh.ts @@ -6,7 +6,7 @@ export const zh: NavbarConfig = [ link: '/zh/guide/', }, { - text: '配置', + text: '编译时配置', link: '/zh/reference/config/', }, { diff --git a/docs/reference/config/README.md b/docs/reference/config/README.md index 94ea35ca..70b83997 100644 --- a/docs/reference/config/README.md +++ b/docs/reference/config/README.md @@ -4,29 +4,31 @@ sidebar: auto # 配置 -以下配置项通过字母排序。 - ## alias -- 类型: `object` -- 默认值: `{}` -- 详情: +- 类型: `object` +- 默认值: `{}` +- 详情: 配置别名,对引用路径进行映射。 -- 示例: +- 示例: + ```js export default { alias: { - main: 'src/assets/styles/main' - } -} + main: 'src/assets/styles/main', + }, +}; ``` + 然后 `import('main')`,实际上是 `import('src/assets/styles/main')`。 ## analyze -- 类型: `object` -- 默认值: + +- 类型: `object` +- 默认值: + ```js { analyzerMode: process.env.ANALYZE_MODE || 'server', @@ -39,40 +41,39 @@ export default { defaultSizes: 'parsed' // stat // gzip } ``` -- 详情: + +- 详情: 构建结果分析,当配置 `process.env.ANALYZE` 时开启,例如执行`ANALYZE=1 fes build` ## autoprefixer -- 类型: `object` -- 默认值: + +- 类型: `object` +- 默认值: + ```js { - flexbox: 'no-2009' + flexbox: 'no-2009'; } ``` -- 详情: + +- 详情: [postcss autoprefixer 插件](https://github.com/postcss/autoprefixer#options) 配置。 - - ## base -- 类型: `string` -- 默认值: `''` -- 详情: +- 类型: `string` +- 默认值: `''` +- 详情: 设置路由前缀,通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`,然后设置了 `base` 为 `/manage/`,那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。 - - - ## chainWebpack -- 类型:`function` -- 默认值:`null` -- 详情: +- 类型:`function` +- 默认值:`null` +- 详情: 通过 [webpack-chain](https://github.com/neutrinojs/webpack-chain) 的 API 修改 webpack 配置。 @@ -84,117 +85,125 @@ export default { // 删除 fes 内置插件 memo.plugins.delete('copy'); }, -} +}; ``` - ## cssLoader -- 类型: `object` -- 默认值: `''` -- 详情: +- 类型: `object` +- 默认值: `''` +- 详情: 设置 [css-loader 配置项](https://github.com/webpack-contrib/css-loader#options)。 ## copy -- 类型: `Array(string) || Array(object)` -- 默认值: `[]` -- 详情: +- 类型: `Array(string) || Array(object)` +- 默认值: `[]` +- 详情: 设置要复制到输出目录的文件、文件夹。 - + 配置约定 `from-to` 规则, 其中 `from` 是相对于 `cwd` 的路径,`to` 是相对于输出路径的路径。 -- 示例: + +- 示例: + ```js export default { copy: { from: '/src/assets/images', - to: 'assets/images' - } -} + to: 'assets/images', + }, +}; ``` + 上面示例中,实现了将 `cwd` 路径中的 `/src/assets/images` 文件夹,在编译完成后,`copy` 到输出路径下的 `assets/images` 文件夹。 ## define -- 类型: `object` -- 默认值: `{}` -- 详情: - +- 类型: `object` +- 默认值: `{}` +- 详情: 用于提供给代码中可用的变量。 -- 示例: +- 示例: + ```js export default { define: { - __DEV__: 'development' - } -} + __DEV__: 'development', + }, +}; ``` + 然后你代码里写 `console.log(__DEV__)`,会被编译成 `console.log('development')`。 ## devServer -- 类型: `object` -- 默认值: `{}` -- 详情: - +- 类型: `object` +- 默认值: `{}` +- 详情: + 配置开发服务器。支持以下子配置项: - - port,端口号,默认 `8000` - - host,默认 `localhost` - - https,是否启用 https server,同时也会开启 HTTP/2 + - port,端口号,默认 `8000` + - host,默认 `localhost` + - https,是否启用 https server,同时也会开启 HTTP/2 启用 port 和 host 也可以通过环境变量 `PORT` 和 `HOST` 临时指定。 ## devtool -- 类型: `string` -- 默认值: `cheap-module-source-map` in dev, `undefined` in build -- 详情: +- 类型: `string` +- 默认值: `cheap-module-source-map` in dev, `undefined` in build +- 详情: 用户配置 sourcemap 类型。详见 [ webpack#devtool 配置](https://webpack.js.org/configuration/devtool/#devtool)。 ## dynamicImport -- 类型: `boolean` -- 默认值: false -- 详情: +- 类型: `boolean` +- 默认值: false +- 详情: 路由是否按需加载 - ## exportStatic -- 类型: `object` -- 默认值: `{}` -- 详情: +- 类型: `object` +- 默认值: `{}` +- 详情: 配置 `html` 的输出形式,默认只输出 `index.html`。 如果开启 `exportStatic`,则会针对每个路由输出 `html` 文件。 比如以下路由, + ``` / /users /list ``` + 不开启 `exportStatic` 时,输出, + ``` - index.html ``` + 设置 `exportStatic: {}` 后,输出, + ``` - index.html - users.html - list.html ``` + ## externals -- 类型:`object` -- 默认值:`{}` -- 详情: +- 类型:`object` +- 默认值:`{}` +- 详情: 设置哪些模块可以不被打包,通过 `