designWidth 用来设置设计稿尺寸，关于这一部分的配置说明请见设计稿及尺寸单位这一章节
sourceRoot 用来设置源码存放目录，通过 Taro 开发工具初始化后的项目源码目录都是 src，你可以通过修改这一配置来重新指定源码目录。
outputRoot 用来设置代码编译后的生产目录，通过 Taro 开发工具初始化后的生产目录都是 dist，你可以通过修改这一配置来重新指定生产目录。
plugins 用来设置一些各个端通用的编译过程配置，例如 babel 配置，JS/CSS 压缩配置等。
用来配置 babel，默认配置如下，可以自行添加自己需要的额外的 presets 及 plugins
babel: {
sourceMap: true,
presets: [
'env'
],
plugins: [
'transform-class-properties',
'transform-decorators-legacy',
'transform-object-rest-spread'
]
}
用来配置 UgligyJS 工具，设置打包过程中的 JS 代码压缩。可以通过 plugins.uglify.enable 来设置是否开启压缩，若设置开启，则可以通过 plugins.uglify.config 来设置 UgligyJS 的配置项，具体配置方式如下：
uglify: {
enable: true,
config: {
// 配置项同 https://github.com/mishoo/UglifyJS2#minify-options
}
}
用来配置 csso 工具，设置打包过程中的 CSS 代码压缩。可以通过 plugins.csso.enable 来设置是否开启压缩，若设置开启，则可以通过 plugins.csso.config 来设置 csso 的配置项，具体配置方式如下：
csso: {
enable: true,
config: {
// 配置项同 https://github.com/css/csso#minifysource-options
}
}
用来设置一些环境变量如 process.env.NODE_ENV，例如我们想设置区分预览、打包来做些不同的操作，可以如下配置：
在 config/dev.js 中
env: {
NODE_ENV: '"development"' // JSON.stringify('development')
}
在 config/prod.js 中
env: {
NODE_ENV: '"production"' // JSON.stringify('production')
}
这样就能在代码中通过 process.env.NODE_ENV === 'development' 来判断环境
用来配置一些全局变量供代码中进行使用，例如
defineConstants: {
A: '"a"' // JSON.stringify('a')
}
1.2.0开始支持
用来配置目录别名，从而方便书写代码引用路径，例如
使用相对路径书写文件引用如下
import A from '../../componnets/A'
import Utils from '../../utils'
为了避免书写多级相对路径，我们可以如下配置 alias
alias: {
'@components': path.resolve(__dirname, '..', 'src/components'),
'@utils': path.resolve(__dirname, '..', 'src/utils')
}
通过上述配置，可以将 src 、src/components 以及 src/utils 目录配置成别名，则代码中的引用改写如下
import A from '@components/A'
import Utils from '@utils'
文件 copy 配置，包含两个配置项 patterns 和 options
用来指定需要拷贝的文件或者目录，数组类型，每一项都必须包含 from 、to 的配置，分别代码来源和需要拷贝到的目录，同时可以设置 ignore 配置来指定需要忽略的文件， ignore 是指定的 glob 类型字符串，或者 glob 字符串数组
值得注意的是，目前 from 必须指定存在的文件或者目录，暂不支持 glob 格式， from 和 to 直接置顶项目根目录下的文件目录，建议 from 以 src 目录开头，to 以 dist 目录开头
一般有如下的使用形式
copy: {
patterns: [
{ from: 'src/asset/tt/', to: 'dist/asset/tt/', ignore: '*.js' }, // 指定需要 copy 的目录
{ from: 'src/asset/tt/sd.jpg', to: 'dist/asset/tt/sd.jpg' } // 指定需要 copy 的文件
]
},
拷贝配置，目前可以指定全局的 ignore
copy: {
options: {
ignore: ['*.js', '*.css'] // 全局的 ignore
}
}
专属于小程序的配置
小程序编译过程的相关配置
配置小程序编译过程中排除不需要经过 Taro 编译的文件，数组类型，写文件路径，文件路径必须以源码所在 src 目录开头
weapp: {
compile: {
exclude: ['src/components/ec-canvas/echarts.js']
}
}
配置一些小程序端用到的插件模块配置，例如 postcss 等
配置 postcss 相关插件
postcss: {
// 可以进行`autoprefixer`的配置。配置项参考[官方文档](https://github.com/postcss/autoprefixer）
autoprefixer: {
enable: true,
config: {
/* autoprefixer 配置项 */
}
},
pxtransform: {
enable: true,
config: {
/* pxtransform 配置项，参考尺寸章节 */
selectorBlackList: ['body']
}
},
// 小程序端样式引用本地资源内联
url: {
enable: true,
config: {
limit: 10240 // 设定转换尺寸上限
}
},
// css modules 功能开关与相关配置
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
专属于 H5 的配置
预览服务的配置，可以更改端口等参数。具体配置参考webpack-dev-server。
devServer: {
port: 10086
}
默认是http服务，如果想开启https服务需要做如下配置。
devServer: {
https: true
}
设置输出解析文件的目录
h5 编译后的静态文件目录
编译后非 entry 的 js 文件的存放目录，主要影响动态引入的pages的存放路径。
自定义 webpack 配置，接受函数形式的配置。
这个函数会收到两个参数，第一个参数是 webpackChain 对象，可参考webpack-chain的 api 进行修改；第二个参数是webpack实例。例如：
/* 这是一个添加 ts-loader 的例子，但事实上 taro 是默认支持 ts 的，并不需要这样做。 */
{
webpackChain (chain, webpack) {
chain.merge({
module: {
rule: {
myloader: {
test: /.tsx?/,
use: [{
loader: 'ts-loader',
options: {}
}]
}
}
}
})
}
}
/* 这是一个添加插件的例子： */
{
webpackChain (chain, webpack) {
chain.merge({
plugin: {
install: {
plugin: require('npm-install-webpack-plugin'),
args: [{
// Use --save or --save-dev
dev: false,
// Install missing peerDependencies
peerDependencies: true,
// Reduce amount of console logging
quiet: false,
// npm command used inside company, yarn is not supported yet
npm: 'cnpm'
}]
}
}
})
}
}
自定义 webpack 配置。这个配置项支持两种形式的配置。
如果该配置项以对象的形态呈现，taro 将会使用 webpack-merge 将这个对象合并到默认的配置项中。
例子：
webpack: {
resolve: {
alias: {
'test': './test'
}
}
}
如果该配置以函数的形态呈现，那这个函数将会接收到两个参数：默认配置（defaultConfig）和 webpack 实例（webpack）。taro 将会以该函数的返回值作为最终的 webpack 配置。 例子：
webpack (defaultConfig, webpack) {
defaultConfig.plugins.push(
new webpack.EnvironmentPlugin(['NODE_ENV'])
)
return defaultConfig
}
Taroapp 的入口，同webpack.entry。
{
entry: {
home: './home.js',
about: './about.js',
contact: './contact.js'
}
}
sourceMap 开关，影响 js、css 的 sourceMap 配置。 dev 状态默认 开，prod 状态默认 关。
extract 功能开关，开启后将使用mini-css-extract-plugin分离 css 文件，
可通过h5.miniCssExtractPluginOption对插件进行配置。
dev 状态默认 关，prod 状态默认 开。
css-loader 的附加配置。配置项参考官方文档，例如：
{
cssLoaderOption: {
localIdentName: '[hash:base64]'
}
}
style-loader 的附加配置。配置项参考官方文档，例如：
{
styleLoaderOption: {
insertAt: 'top'
}
}
sass-loader 的附加配置。配置项参考官方文档，例如：
{
sassLoaderOption: {
implementation: require("dart-sass")
}
}
less-loader 的附加配置。配置项参考官方文档，例如：
{
lessLoaderOption: {
strictMath: true,
noIeCompat: true
}
}
stylus-loader 的附加配置。配置项参考官方文档。
针对mp4|webm|ogg|mp3|wav|flac|aac文件的 url-loader 配置。配置项参考官方文档，例如：
{
mediaUrlLoaderOption: {
limit: 8192
}
}
针对woff|woff2|eot|ttf|otf文件的 url-loader 配置。配置项参考官方文档。
针对png|jpg|jpeg|gif|bpm|svg文件的 url-loader 配置。配置项参考官方文档。
mini-css-extract-plugin的附加配置，在enableExtract为true的情况下生效。
配置项参考官方文档，例如：
{
miniCssExtractPluginOption: {
filename: 'css/[name].css',
chunkFilename: 'css/[id].css'
}
}
配置一些 H5 端用到的插件模块配置，暂时只有 postcss。
可以进行autoprefixer的配置。配置项参考官方文档，例如：
postcss: {
autoprefixer: {
enable: true,
config: {
/* autoprefixer 配置项 */
}
}
}
可以进行pxtransform的配置。配置项参考官方文档，例如：
postcss: {
pxtransform: {
enable: true,
config: {
/* pxtransform 配置项 */
}
}
}
可以进行 H5 端 css modules 配置，配置如下
postcss: {
// css modules 功能开关与相关配置
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}