Skip to main content
Version: Next

Compile configuration Details

sourceRoot​

string

Default: 'src'

Source code directory.

outputRoot​

string

Default: 'dist'

The production directory after the code is compiled.

designWidth​

number

Defalut value: 750

Design size, please see for detailsDesign and size unit。

defineConstants​

object

Used to configure some global variables for use in the code.

The configuration method can be referred to Webpack DefinePlugin，for eaxmple:

/config/index.js
module.exports = {
  // ...
  defineConstants: {
    A: '"a"' // JSON.stringify('a')
  }
}

alias​

object

Used to configure directory aliases, thus facilitating the writing of code reference paths.

Use relative paths to write file references as follows.

import A from '../../componnets/A'
import Utils from '../../utils'
import packageJson from '../../package.json'
import projectConfig from '../../project.config.json'

To avoid writing multi-level relative paths, we can configure alias as follows.

module.exports = {
  // ...
  alias: {
    '@/components': path.resolve(__dirname, '..', 'src/components'),
    '@/utils': path.resolve(__dirname, '..', 'src/utils'),
    '@/package': path.resolve(__dirname, '..', 'package.json'),
    '@/project': path.resolve(__dirname, '..', 'project.config.json'),
  }
}

With the above configuration, the src/components and src/utils directories can be configured as aliases, and the package.json and project.config.json files in the root directory can be configured as aliases, so that the references in the code are rewritten as follows.

import A from '@/components/A'
import Utils from '@/utils'
import packageJson from '@/package'
import projectConfig from '@/project'

In order for the editor (VS Code) to not report errors and continue to use the automatic path completion feature, you need to configure paths in jsconfig.json or tsconfig.json in the root of the project for the editor to recognize our alias in the following form.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["./src/components/*"],
      "@/utils/*": ["./src/utils/*"],
      "@/package": ["./package.json"],
      "@/project": ["./project.config.json"],
    }
  }
}

It is recommended that aliases start with @/ rather than just @,as there is a small chance of naming conflicts with some npm packages of the scoped form.（eg：@tarojs/taro, @babel/core）

env​

object

Used to set environment variables such as process.env.NODE_ENV.

Suppose we need to distinguish between development and production environments, which can be configured as follows.

config/dev.js：

/config/dev.js
module.exports = {
  // ...
  env: {
    NODE_ENV: '"development"' // JSON.stringify('development')
  }
}

config/prod.js：

config/prod.js
module.exports = {
  // ...
  env: {
    NODE_ENV: '"production"' // JSON.stringify('production')
  }
}

This allows the environment to be determined in the code by process.env.NODE_ENV === 'development'.

copy​

object

Used to copy files directly from the source code directory to the compiled production directory.

copy.patterns​

array

This is used to specify the files or directories to be copied, each of which must contain the from and to configurations, representing the source and the directory to be copied to, respectively. You can also set the ignore configuration to specify the files to be ignored. ignore is a string of type glob, or an array of glob strings.

Note that from must specify a file or directory that exists, glob format is not supported. from and to directly top the file directories in the project root, it is recommended that from starts with the src directory and to starts with the dist directory.

They are generally used in the following forms.

module.exports = {
  // ...
  copy: {
    patterns: [
      { from: 'src/asset/tt/', to: 'dist/asset/tt/', ignore: ['*.js'] }, // Specify the directory to be copied
      { from: 'src/asset/tt/sd.jpg', to: 'dist/asset/tt/sd.jpg' } // Specify the files to be copied
    ]
  }
}

copy.options​

object

Copy the configuration, you can specify the global ignore.

module.exports = {
  // ...
  copy: {
    options: {
      ignore: ['*.js', '*.css'] // global ignore
    }
  }
}

plugins​

array

Configure the Taro plugin.

When no parameters need to be passed to the plugin, the following writeup is equivalent.

module.exports = {
  // ...
  plugins: [
    // 从本地绝对路径引入插件
    '/absulute/path/plugin/filename',
    // 引入 npm 安装的插件
    '@tarojs/plugin-mock',
    ['@tarojs/plugin-mock'],
    ['@tarojs/plugin-mock', {}]
  ]
}

给插件传参：

module.exports = {
  // ...
  plugins: [
    ['@tarojs/plugin-mock', {
      mocks: {
        '/api/user/1': {
          name: 'judy',
          desc: 'Mental guy'
        }
      }
    }]
  ]
}

presets​

array

A preset is a collection of Taro plugins with the same configuration syntax as plugins。

module.exports = {
  // ...
  presets: [
    // The set of plugins installed by npm
    '@tarojs/preset-sth', 
    // The set of plugins installed by npm, and pass in the plugin parameters
    ['@tarojs/plugin-sth', {
      arg0: 'xxx'
    }],
    // The plugin set is brought in from the local absolute path, and also if parameters need to be passed in as above
    '/absulute/path/preset/filename',
  ]
}

terser​

object

Configure the terser tool to compress JS code.

terser.enable​

boolean

Default value true

Indicates if JS code compression is enabled.

terser.config​

object

The specific configuration of the terser.

module.exports = {
  // ...
  terser: {
    enable: true,
    config: {
      // The configuration items are the same as https://github.com/terser/terser#minify-options
    }
  }
}

The terser configuration only works in production mode. If you are using watch mode and want to enable terser, then you need to set process.env.NODE_ENV to 'production'.

csso​

object

Configure the csso tool to compress CSS code.

csso.enable​

boolean

Default value true.

Indicates if CSS code compression is enabled.

csso.config​

object

The specific configuration of csso.

module.exports = {
  // ...
  csso: {
    enable: true,
    config: {
      // The configuration items are the same as https://github.com/css/csso#minifysource-options
    }
  }
}

The csso configuration only works in production mode. If you are using watch mode and want to enable csso, then you need to set process.env.NODE_ENV to 'production'.

sass​

object

Used to control the compilation behavior of scss code, by default dart-sass is used, the specific configuration can be found in sass.

When it is necessary to insert scss code into the headers of all scss files, this can be set with three additional parameters.

sass.resource​

string | array

The absolute path to the scss file that needs to be globally injected. If multiple files are to be introduced, passing in an array is supported.

Passing in relative paths is supported when there is a projectDirectory configuration exists, relative paths are only supported.

sass.projectDirectory​

string

The absolute address of the project root directory (if it is an mini-program cloud development template, it should be the client directory).

sass.data​

string

Global scss variables, if the same variables are set in data and resource, then data takes precedence over resource.

Example of global injection of scss​

Single file path form​

When only the resource field is available, the absolute path to the scss file can be passed.

module.exports = {
  // ...
  sass: {
    resource: path.resolve(__dirname, '..', 'src/styles/variable.scss')
  }
}

Multiple file path form​

In addition, when only the resource field is available, an array of paths can be passed in.

module.exports = {
  // ...
  sass: {
    resource: [
      path.resolve(__dirname, '..', 'src/styles/variable.scss'),
      path.resolve(__dirname, '..', 'src/styles/mixins.scss')
    ]
  }
}

Specify the project root path form​

You can additionally configure the projectDirectory field so that you can write relative paths in resource.

module.exports = {
  // ...
  sass: {
    resource: [
      'src/styles/variable.scss',
      'src/styles/mixins.scss'
    ],
    projectDirectory: path.resolve(__dirname, '..')
  }
}

Pass in the scss variable string​

The $nav-height variable declared in data has the highest priority.

module.exports = {
  // ...
  sass: {
    resource: [
      'src/styles/variable.scss',
      'src/styles/mixins.scss'
    ],
    projectDirectory: path.resolve(__dirname, '..'),
    data: '$nav-height: 48px;'
  }
}

mini​

object

Dedicated mini program configuration.

mini.baseLevel​

number

Default value: 16

For mini-program where template templates do not support recursion (e.g. WeChat, QQ, Jingdong), Taro will loop baseLevel times for all templates to support recursive calls to similar templates.

However, looping too many times can result in a rather large base template, so you can use the baseLevel configuration item to configure fewer loop levels when your nesting level is not too deep.

Of course, when the nesting level is deep, you can also increase the baseLevel to avoid some problems when you reach the loop limit and Taro calls a custom component to restart the loop.

mini.compile​

object

The configuration related to the compilation process of the mini program

mini.compile.exclude​

array

Configure the mini program compilation process to exclude files that do not need to be compiled by Taro, the array can contain specific file paths or can be a judgment function, same as Rule.exclude.

Assuming that a file is to be excluded, the specific path of the file to be excluded can be configured as follows.

module.exports = {
  // ...
  mini: {
    // ...
    compile: {
      exclude: [
        path.resolve(__dirname, '..', 'src/pages/index/vod-wx-sdk-v2.js')
      ]
    }
  }
}

It is also possible to configure the judgment function.

module.exports = {
  // ...
  mini: {
    // ...
    compile: {
      exclude: [
        modulePath => modulePath.indexOf('vod-wx-sdk-v2') >= 0
      ]
    }
  }
}

mini.compile.include​

array

Configure additional files that need to be compiled by Taro in the same way as [mini.compile.exclude](. /config-detail#minicompileexclude) in the same way as Rule.include.

For example, Taro does not compile files in node_modules by default, you can use this configuration to make Taro compile files in node_modules.

mini.webpackChain​

function

Customize the Webpack configuration.

This function receives three arguments. The first argument is the webpackChain object, which can be modified by referring to the webpack-chain API, the second argument is the webpack instance, and the third argument PARSE_AST_ TYPE is the set of file types that the mini program is compiled with.

The third parameter takes the following values:

export enum PARSE_AST_TYPE {
  ENTRY = 'ENTRY',
  PAGE = 'PAGE',
  COMPONENT = 'COMPONENT',
  NORMAL = 'NORMAL',
  STATIC = 'STATIC'
}

Example:

// This is an example of adding a raw-loader to directly reference an md file in a project
module.exports = {
  // ...
  mini: {
    // ...
    webpackChain (chain, webpack) {
      chain.merge({
        module: {
          rule: {
            myloader: {
              test: /\.md$/,
              use: [{
                loader: 'raw-loader',
                options: {}
              }]
            }
          }
        }
      })
    }
  }
}
// This is an example of adding a plugin
module.exports = {
  // ...
  mini: {
    // ...
    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'
            }]
          }
        }
      })
    }
  }
}

mini.output​

object

The output option that can be used to modify and extend Webpack, the configuration items refer to documentation。

mini.enableSourceMap​

boolean

Default value: true in watch mode, otherwise false.

Used to control whether to generate sourceMap corresponding to js, css.

mini.sourceMapType​

string

Default value: 'cheap-module-source-map'

Detail configuration refer to Webpack devtool configuration。

mini.debugReact​

Supported since v3.0.8

boolean

Default value: false.

Specifies whether the code related to the React framework uses the development environment (uncompressed) code, the default is to use the production environment (compressed) code.

mini.minifyXML​

Supported since v3.0.8

object

About the configuration related to compressing mini program xml files.

mini.minifyXML.collapseWhitespace​

boolean

Default value: false.

If or not to merge spaces in the xml file.

mini.postcss​

object

Configure postcss related plugins.

module.exports = {
  // ...
  mini: {
    // ...
    postcss: {
      // The autoprefixer configuration can be performed. configuration items  refer to documentation https://github.com/postcss/autoprefixer
      autoprefixer: {
        enable: true,
        config: {
          // autoprefixer configuration items 
        }
      },
      pxtransform: {
        enable: true,
        config: {
          // pxtransform configuration items 
          selectorBlackList: ['body']
        }
      },
      // mini program styles referencing local resources inline
      url: {
        enable: true,
        config: {
          limit: 10240 // Set upper limit of conversion size
        }
      },
      // css modules function switches and related configuration
      cssModules: {
        enable: false, // Default is false, if you want to use the css modules function, set it to true
        config: {
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

mini.commonChunks​

array | function

Used to tell the Taro compiler which public files it needs to extract, supports two types of configuration.

The configuration value of commonChunks based on the name of the common chunks in the webpack configuration optimization.runtimeChunk and optimization.splitChunks . Default value of webpack.optimization configuration in Taro Source Code。

If you need to split public files by yourself, please override the optimization.runtimeChunk and optimization.splitChunks via webpackChain configuration to override the optimization.runtimeChunk and optimization.splitChunks configurations. Then specify the public entry file with this commonChunks configuration.

String Array Approach​

Default values for common compilation: ['runtime', 'vendors', 'taro', 'common']

Default values when compiling as a WeChat mini program plugin: ['plugin/runtime', 'plugin/vendors', 'plugin/taro', 'plugin/common']

You can pass in an array of names of public files that need to be extracted.

Example:

module.exports = {
  // ...
  mini: {
    // ...
    commonChunks: ['runtime', 'vendors', 'taro', 'common']
  }
}

These public files represent.

  • runtime: webpack runtime entry
  • taro: Taro-related dependencies in node_modules
  • vendors: public dependencies of node_modules other than Taro
  • common: common logic for business code in the project

Function method​

The configuration is performed by manipulating the default public file array of the input parameters and returning a new array as follows:

module.exports = {
  // ...
  mini: {
    // ...
    commonChunks (commonChunks) {
      // The value of commonChunks is the default array of public filenames
      commonChunks.push('yourCustomCommonChunkName')
      return commonChunks
    }
  }
}

mini.addChunkPages​

function

Specify the public files that need to be referenced separately for certain pages.

For example, when using mini program sub-packaging, in order to reduce the size of the main package, the sub-packaged pages want to introduce their own public files and don't want to put them directly inside the main package. Then we can first use the webpackChain configuration to abstract the public files of the sub-package separately, and then configure the introduction of the public files of the sub-package via mini.addChunkPages for the sub-package page, which is used in the following way.

mini.addChunkPages is configured as a function that accepts two parameters

  • pages parameter is of type Map, which is used to add public files to the page
  • the pagesNames parameter is a list of all page identifiers for the current application, which can be printed to see the page identifiers

For example, to add eating and morning to the pages/index/index page, the following two public files are extracted.

module.exports = {
  // ...
  mini: {
    // ...
    addChunkPages (pages: Map<string, string[]>, pagesNames: string[]) {
      pages.set('pages/index/index', ['eating', 'morning'])
    }
  }
}

mini.optimizeMainPackage​

object

Optimize the size of the main package

After a simple configuration like the following, you can avoid that modules not introduced in the main package are not extracted into commonChunks, this function will analyze the dependencies of modules and chunks during packaging, filter out the modules not referenced in the main package to extract it into the sub-package, the following are the two types of sub-package public modules extracted.

  • sub-package root/sub-vendors.(js|wxss)

    • If the module is only referenced by multiple pages within a single subpackage, it is extracted to the sub-vendors file in the root of that subpackage.

  • sub-package root/sub-common/*. (js|wxss)

    • If the module is referenced by pages in multiple sub-packages, it will normally be extracted to the public module of the main package, but here, to ensure the optimal size of the main package, it will first be extracted to a public module, and then copied to the sub-common folder of the corresponding sub-package (because the mini program cannot introduce files across sub-packages, so here you need to make a copy of each sub-package) It is important to note that this will result in a larger size of the total package.
module.exports = {
  // ...
  mini: {
    // ...
    optimizeMainPackage: {
      enable: true
    }
  }
}

If there is a module that does not want to go through the sub-package extraction rules, you can configure it in exclude so that the module will go through the original extraction scheme and be extracted into the main package, like the following (absolute paths and functions are supported).

module.exports = {
  // ...
  mini: {
    // ...
    optimizeMainPackage: {
      enable: true,
      exclude: [
        path.resolve(__dirname, 'moduleName.js'),
        (module) => module.resource.indexOf('moduleName') >= 0
      ]
    }
  }
}

mini.styleLoaderOption​

object

Additional configuration of style-loader, configuration items refer to documentation，eg:

module.exports = {
  // ...
  mini: {
    // ...
    styleLoaderOption: {
      insertAt: 'top'
    }
  }
}

mini.cssLoaderOption​

object

Additional configuration of css-loader, configuration items refer to documentation，eg:

module.exports = {
  // ...
  mini: {
    // ...
    cssLoaderOption: {
      localIdentName: '[hash:base64]'
    }
  }
}

mini.sassLoaderOption​

object

Additional configuration of sass-loader, configuration items refer to documentation, eg:

module.exports = {
  // ...
  mini: {
    // ...
    sassLoaderOption: {
      implementation: require("node-sass")
    }
  }
}

mini.lessLoaderOption​

Supported since v3.0.26

object

Additional configuration of less-loader, configuration items refer to documentation，eg:

module.exports = {
  // ...
  mini: {
    // ...
    lessLoaderOption: {
      lessOptions: {
        strictMath: true,
        noIeCompat: true
      }
    }
  }
}

mini.stylusLoaderOption​

object

Additional configuration of stylus-loader, configuration items refer to documentation。

mini.miniCssExtractPluginOption​

object

Additional configuration of mini-css-extract-plugin, configuration items refer to documentation。

module.exports = {
  // ...
  mini: {
    // ...
    miniCssExtractPluginOption: {
      filename: '[name].css',
      chunkFilename: '[name].css'
    }
  }
}

mini.imageUrlLoaderOption​

object

The url-loader configuration for png | jpg | jpeg | gif | bpm | svg files. The configuration items refer to documentation。

mini.mediaUrlLoaderOption​

object

The url-loader configuration for mp4 | webm | ogg | mp3 | wav | flac | aac files. The configuration items refer to documentation，eg:

module.exports = {
  // ...
  mini: {
    // ...
    mediaUrlLoaderOption: {
      limit: 8192
    }
  }
}

mini.fontUrlLoaderOption​

object

The url-loader configuration for woff | woff2 | eot | ttf | otf files. The configuration items refer to documentation。

h5​

H5-specific configuration.

h5.entry​

object

The input option can be used to modify and extend Webpack documentation。

module.exports = {
  // ...
  h5: {
    // ...
    entry: {
      home: ['./home.js'],
      about: ['./about.js'],
      contact: ['./contact.js']
    }
  }
}

h5.output​

object

The output option that can be used to modify and extend Webpack, the configuration items refer to documentation。

module.exports = {
  // ...
  h5: {
    // ...
    output: {
      filename: 'js/[name].[hash:8].js',
      chunkFilename: 'js/[name].[chunkhash:8].js'
    }
  }
}

h5.publicPath​

string

Defalut value: '/'

Set the directory where the output parsed files are to be sent.

h5.staticDirectory​

string

Defalut value: 'static'

h5 Compiled static files directory.

h5.chunkDirectory​

string

Defalut value: 'chunk'

The directory where the non-entry js files are stored after compilation, mainly affecting the path to dynamically introduced pages.

h5.devServer​

object

Preview the configuration of the service, you can change parameters such as ports. Specific configuration reference webpack-dev-server。

Example:

修改端口：

module.exports = {
  // ...
  h5: {
    // ...
    devServer: {
      port: 10086
    }
  }
}

Enable https service

module.exports = {
  // ...
  h5: {
    // ...
    devServer: {
      https: true
    }
  }
}

h5.webpackChain​

function

Customize the Webpack configuration.

This function receives two arguments, the first one is the webpackChain object, which can be modified by referring to the webpack-chain API, and the second argument is the webpack instance.

例子：

// This is an example of adding a raw-loader to directly reference an md file in a project
module.exports = {
  // ...
  h5: {
    // ...
    webpackChain (chain, webpack) {
      chain.merge({
        module: {
          rule: {
            myloader: {
              test: /\.md$/,
              use: [{
                loader: 'raw-loader',
                options: {}
              }]
            }
          }
        }
      })
    }
  }
}
// This is an example of adding a plugin
module.exports = {
  // ...
  h5: {
    // ...
    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'
            }]
          }
        }
      })
    }
  }
}

h5.router​

object

Routing related configuration.

h5.router.mode​

'hash' | 'browser'

Default value: 'hash'

Configure the routing mode.' hash' and 'browser' correspond to hash routing mode and browser history routing mode, respectively.

Example:

module.exports = {
  // ...
  h5: {
    // ...
    router: {
      mode: 'hash' // or 'browser'
    }
  }
}

For the above configuration, after calling Taro.navigateTo({ url: '/pages/index/index' }), the browser address bar will be changed to:

  • https://{{domain}}/#/pages/index/index（hash mode）
  • https://{{domain}}/pages/index/index（browser mode）

h5.router.basename​

string

Configure the routing base path.

例子：

module.exports = {
  // ...
  h5: {
    // ...
    router: {
      basename: '/myapp'
    }
  }
}

For the above configuration, after calling Taro.navigateTo({ url: '/pages/index/index' }), the browser address bar will be changed to:

  • https://{{domain}}/#/myapp/pages/index/index（hash mode）
  • https://{{domain}}/myapp/pages/index/index（browser mode）

h5.router.customRoutes​

object

Configure custom routes.

例子：

module.exports = {
  // ...
  h5: {
    // ...
    router: {
      customRoutes: {
        '/pages/index/index': '/index'
      }
    }
  }
}

For the above configuration, after calling Taro.navigateTo({ url: '/pages/index/index' }), the browser address bar will be changed to

  • https://{{domain}}/#/index（hash mode）
  • https://{{domain}}/myapp/index（browser mode)

h5.enableSourceMap​

boolean

Default value: true in watch mode, otherwise false.

Used to control whether to generate sourceMap corresponding to js, css.

h5.sourceMapType​

string

Default value: 'cheap-module-eval-source-map'

Detail configuration refer to Webpack devtool configuration。

h5.useHtmlComponents​

Taro 3.2.4 started to support

boolean

Default value: false

Used to control whether to use the compatibility component library on the H5 side, for details see [React Compatibility Component Library](./h5#React Compatibility Component Library)。

h5.enableExtract​

boolean

Default value: false in watch mode, otherwise true.

The extract function switch, when turned on, will use mini-css-extract-plugin to separate css files, which can be configured via h5.miniCssExtractPluginOption to configure the plugin.

h5.esnextModules​

array

The configuration requires additional modules compiled via Taro's preset postcss.

Suppose that the style units in taro-ui need to be adapted for conversion.

module.exports = {
  // ...
  h5: {
    // ...
    // After this configuration, the style files introduced in the code under the `node_modules/taro-ui/` path will be compiled by postcss.
    esnextModules: ['taro-ui']
  }
}

h5.postcss​

object

configure postcss related plugins.

h5.postcss.autoprefixer​

object

The autoprefixer configuration can be performed. The configuration items refer to the documentation, eg:

module.exports = {
  // ...
  h5: {
    // ...
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
          /* autoprefixer configuration item  */
        }
      }
    }
  }
}

h5.postcss.pxtransform​

object

Configuration of pxtransform can be done. Configuration items refer to documentation, eg:

module.exports = {
  // ...
  h5: {
    // ...
    postcss: {
      pxtransform: {
        enable: true,
        config: {
          /* pxtransform configuration item */
        }
      }
    }
  }
}

h5.postcss.cssModules​

object

CSS Modules can be configured as follows.

module.exports = {
  // ...
  h5: {
    // ...
    postcss: {
      // css modules function switches and related configuration
      cssModules: {
        enable: false, // default is false, if you want to use the css modules function, set it to true
        config: {
          namingPattern: 'module',
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

h5.styleLoaderOption​

object

Additional configuration for style-loader. configuration item reference documentation, eg: 

module.exports = {
  // ...
  h5: {
    // ...
    styleLoaderOption: {
      insertAt: 'top'
    }
  }
}

h5.cssLoaderOption​

object

Additional configuration for css-loader. configuration item reference documentation, eg: 

module.exports = {
  // ...
  h5: {
    // ...
    cssLoaderOption: {
      localIdentName: '[hash:base64]'
    }
  }
}

h5.sassLoaderOption​

object

Additional configuration for sass-loader. configuration item reference documentation, eg: 

module.exports = {
  // ...
  h5: {
    // ...
    sassLoaderOption: {
      implementation: require("node-sass")
    }
  }
}

h5.lessLoaderOption​

Supported since v3.0.26

object

Additional configuration for less-loader. configuration item reference documentation, eg: 

module.exports = {
  // ...
  h5: {
    // ...
    lessLoaderOption: {
      lessOptions: {
        strictMath: true,
        noIeCompat: true
      }
    }
  }
}

h5.stylusLoaderOption​

object

Additional configuration for stylus-loader. configuration item reference documentation。

h5.miniCssExtractPluginOption​

object

Additional configuration for mini-css-extract-plugin, effective if h5.enableExtract configuration is true.

configuration item reference documentation, eg: 

module.exports = {
  // ...
  h5: {
    // ...
    miniCssExtractPluginOption: {
      filename: 'css/[name].css',
      chunkFilename: 'css/[id].css'
    }
  }
}

h5.imageUrlLoaderOption​

object

The url-loader configuration for png | jpg | jpeg | gif | bpm | svg files. configuration item reference [documentation], eg:

h5.mediaUrlLoaderOption​

object

The url-loader configuration for mp4 | webm | ogg | mp3 | wav | flac | aac files.configuration item reference [documentation], eg:

module.exports = {
  // ...
  h5: {
    // ...
    mediaUrlLoaderOption: {
      limit: 8192
    }
  }
}

h5.fontUrlLoaderOption​

object

The url-loader configuration for woff | woff2 | eot | ttf | otf files. Refer to the documentation for the configuration items.

rn​

Configure exclusively for RN.

rn.appName​

string

Set the name of the registered application in the RN bundle

module.exports = {
  // ...
  rn: {
    // ...
    appName: 'TaroDemo'
  }
}

rn.entry​

string

Entry uses the module lookup rule {name}. {platform}. {ext} to automatically distinguish between platforms

module.exports = {
  // ...
  rn: {
    // ...
    entry: 'index.android.tsx'
  }
}

rn.output​

object

Set the output path of the bundle generated by Metro packaging, the default dist directory

module.exports = {
  // ...
  rn: {
    // ...
    output: {
      iosSourceMapUrl: '', // sourcemap file url
      iosSourcemapOutput: '../taro-native-shell/ios/main.map', // sourcemap file output path
      iosSourcemapSourcesRoot: '', // The root directory when converting sourcemap resource paths to relative paths
      androidSourceMapUrl: '',
      androidSourcemapOutput: '../taro-native-shell/android/app/src/main/assets/index.android.map',
      androidSourcemapSourcesRoot: '',
      ios: '../taro-native-shell/ios/main.jsbundle',
      iosAssetsDest: '../taro-native-shell/ios',
      android: '../taro-native-shell/android/app/src/main/assets/index.android.bundle',
      androidAssetsDest: '../taro-native-shell/android/app/src/main/res'
    },
  }
}

rn.postcss​

object

postcss related configuration, other style languages preprocessed after this configuration.

module.exports = {
  // ...
  rn: {
    // ...
    postcss: {
      // postcss 配置，参考 https://github.com/postcss/postcss#options
      options: { /* ... */ },
      // 默认true，控制是否对 css value 进行 scalePx2dp 转换，pxtransform配置 enable 才生效
      scalable: boolean,
      pxtransform: {
        enable: boolean, // 默认true
        config: { /* ... */ } // 插件 pxtransform 配置项，参考尺寸章节
      },
    },
  }
}

rn.sass​

object

sassrelated configurations. options configuration item reference documentation。

module.exports = {
  // ...
  rn: {
    // ...
    sass: {
      options: { /* ... */ },
        // 加入到脚本注入的每个 sass 文件头部，在 config.sass 之前
      additionalData: '', // {String|Function}
    }
  }
}

rn.less​

object

less related configurations. options configuration item reference documentation。

module.exports = {
  // ...
  rn: {
    // ...
    less: {
      options: { /* ... */ },
      additionalData: '', // {String|Function}
    }
  }
}

rn.stylus​

object

stylus related configurations. stylus.options configuration item reference documentation。

module.exports = {
  // ...
  rn: {
    // ...
    stylus: {
      options: { /* ... */ },
      additionalData: '', // {String|Function}
    }
  }
}

rn.resolve​

object

resolve handles the configuration of dependency files. resolve.include can be configured with multiple arrays of npm package names, treating npm packages as project files, supporting node_modules platform priority file access and global styles.

module.exports = {
  // ...
  rn: {
    // ...
    resolve: {
      // ...
      include: ['taro-ui'] // Handles cross-platform handling of references to node_modules/test files.
    }
  }
}

rn.enableMultipleClassName​

boolean

Support multiple className conversions, end with classname or style, extract the prefix, and then generate the corresponding xxxStyle according to the prefix. e.g. barClassName -> barStyle. Default value false, not enabled.

module.exports = {
  rn: {
    enableMultipleClassName: false
  }
}

rn.enableMergeStyle​

boolean

Convert to object when the tag style property value is an array. Default value false, not enabled.

module.exports = {
  rn: {
    enableMergeStyle: false // https://github.com/shinken008/babel-plugin-jsx-attributes-array-to-object#example
  }
}