6.8 KiB
sidebar |
---|
auto |
配置
以下配置项通过字母排序。
alias
-
类型:
object
-
默认值:
{}
-
详情:
配置别名,对引用路径进行映射。
-
示例:
export default {
alias: {
main: 'src/assets/styles/main'
}
}
然后 import('main')
,实际上是 import('src/assets/styles/main')
。
base
-
类型:
string
-
默认值:
''
-
详情:
设置路由前缀,通常用于部署到非根目录。比如你有路由
/pageA
、/pageB
,然后设置了base
为/manage/
,那么就可以通过/manage/pageA
、/manage/pageB
访问到它们。
cssLoader
-
类型:
object
-
默认值:
''
-
详情:
设置 css-loader 配置项。
copy
-
类型:
Array(string) || Array(object)
-
默认值:
[]
-
详情:
设置要复制到输出目录的文件、文件夹。
配置约定
from-to
规则, 其中from
是相对于cwd
的路径,to
是相对于输出路径的路径。 -
示例:
export default {
copy: {
from: '/src/assets/images',
to: 'assets/images'
}
}
上面示例中,实现了将 cwd
路径中的 /src/assets/images
文件夹,在编译完成后,copy
到输出路径下的 assets/images
文件夹。
define
-
类型:
object
-
默认值:
{}
-
详情:
用于提供给代码中可用的变量。
-
示例:
export default {
define: {
__DEV__: 'development'
}
}
然后你代码里写 console.log(__DEV__)
,会被编译成 console.log('development')
。
devServer
-
类型:
object
-
默认值:
{}
-
详情:
配置开发服务器。支持以下子配置项:
- port,端口号,默认
8000
- host,默认
localhost
- https,是否启用 https server,同时也会开启 HTTP/2
启用 port 和 host 也可以通过环境变量
PORT
和HOST
临时指定。 - port,端口号,默认
devtool
-
类型:
string
-
默认值:
cheap-module-source-map
in dev,undefined
in build -
详情:
用户配置 sourcemap 类型。详见 webpack#devtool 配置。
extraPostCSSPlugins
-
类型:
array
-
默认值:
[]
-
详情:
设置额外的 postcss 插件。
inlineLimit
-
类型:
number
-
默认值:
8192
(8k) -
详情:
配置图片文件是否走 base64 编译的阈值。默认是
8192
字节,小于它会被编译为 base64 编码,否则会生成单独的文件。
lessLoader
-
类型:
object
-
默认值:
{}
-
详情:
设置 less-loader 配置项。
mock
-
类型:
object || boolean
-
默认值:
{}
-
详情:
配置 mock 属性。
- 当 mock 为
boolean
类型时,true
表示打开 mock,false
表示关闭 mock。 - 当 mock 为
object
类型时,默认打开 mock。也可以通过子属性prefix
添加过滤条件,满足条件的走 mock 文件。
- 当 mock 为
-
示例:
export default {
mock: {
prefix: '/api/auth'
}
}
然后所有以 /api/users
开始的请求,就能进入 mock.js 文件处理。
mountElementId
-
类型:
string
-
默认值:
app
-
详情:
指定渲染到的 HTML 元素 id。
nodeModulesTransform
-
类型:
object
-
默认值:
{ type: 'all' }
-
详情:
设置 node_modules 目录下依赖文件的编译方式。子配置项包含:
-
type
,编译模式类型,可选all
和none
。- 默认值是
all
,全部编译,然后可以通过exclude
忽略不需要编译的依赖库。 - 当切换为
none
,默认值编译 es5-imcompatible-versions 里声明的依赖,可通过exclude
配置添加额外需要编译的。
- 默认值是
-
exclude
,忽略的依赖库,包名,暂不支持绝对路径。
前者速度较慢,但可规避常见的兼容性等问题,后者反之。
-
outputPath
-
类型:
string
-
默认值:
dist
-
详情:
指定输出路径。
::: tip
不允许设定为 src
、public
、pages
等约定目录。
:::
postcssLoader
-
类型:
object
-
默认值:
{}
-
详情:
proxy
-
类型:
object
-
默认值:
{}
-
详情:
配置代理能力。
-
示例:
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
-
类型:
publicPath
-
默认值:
/
-
详情:
配置 webpack 的 publicPath。当打包的时候,webpack 会在静态文件路径前面添加
publicPath
的值,当你需要修改静态文件地址时,比如使用 CDN 部署,把publicPath
的值设为 CDN 的值就可以。
singular
-
类型:
boolean
-
默认值:
false
-
详情:
配置是否启用单数模式的目录。 比如
src/pages
的约定在开启后为src/page
目录,@fesjs/fes-plugins 插件也遵照此配置的约定。
targets
-
类型:
object
-
默认值:
{}
-
详情:
配置需要兼容的浏览器最低版本,会自动引入 polyfill 和做语法转换。
terserOptions
- 类型:
object
- 默认值:
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
}
}
-
详情:
配置 压缩器 terser 的配置项。
title
-
类型:
string
-
默认值:
''
-
详情:
配置标题。