h5

专属于 H5 的配置。

h5.entry

object

可用于修改、拓展 Webpack 的 input 选项,配置项参考 官方文档

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. entry: {
  6. home: ['./home.js'],
  7. about: ['./about.js'],
  8. contact: ['./contact.js']
  9. }
  10. }
  11. }

h5.output

object

可用于修改、拓展 Webpack 的 output 选项,配置项参考官方文档

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. output: {
  6. filename: 'js/[name].[hash:8].js',
  7. chunkFilename: 'js/[name].[chunkhash:8].js'
  8. }
  9. }
  10. }

h5.publicPath

string

默认值:'/'

设置输出解析文件的目录。

h5.staticDirectory

string

默认值:'static'

h5 编译后的静态文件目录。

h5.chunkDirectory

string

默认值:'chunk'

编译后非 entry 的 js 文件的存放目录,主要影响动态引入的 pages 的存放路径。

h5.devServer

object

预览服务的配置,可以更改端口等参数。具体配置参考 webpack-dev-server

例子:

修改端口:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. devServer: {
  6. port: 10086
  7. }
  8. }
  9. }

开启 https 服务:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. devServer: {
  6. https: true
  7. }
  8. }
  9. }

h5.webpackChain

function

自定义 Webpack 配置。

这个函数会收到两个参数,第一个参数是 webpackChain 对象,可参考 webpack-chain 的 API 进行修改,第二个参数是 webpack 实例。

例子:

  1. // 这是一个添加 raw-loader 的例子,用于在项目中直接引用 md 文件
  2. module.exports = {
  3. // ...
  4. h5: {
  5. // ...
  6. webpackChain (chain, webpack) {
  7. chain.merge({
  8. module: {
  9. rules: {
  10. myloader: {
  11. test: /\.md$/,
  12. use: [{
  13. loader: 'raw-loader',
  14. options: {}
  15. }]
  16. }
  17. }
  18. }
  19. })
  20. }
  21. }
  22. }
  1. // 这是一个添加插件的例子
  2. module.exports = {
  3. // ...
  4. h5: {
  5. // ...
  6. webpackChain (chain, webpack) {
  7. chain.merge({
  8. plugin: {
  9. install: {
  10. plugin: require('npm-install-webpack-plugin'),
  11. args: [{
  12. // Use --save or --save-dev
  13. dev: false,
  14. // Install missing peerDependencies
  15. peerDependencies: true,
  16. // Reduce amount of console logging
  17. quiet: false,
  18. // npm command used inside company, yarn is not supported yet
  19. npm: 'cnpm'
  20. }]
  21. }
  22. }
  23. })
  24. }
  25. }
  26. }

h5.router

object

路由相关的配置。

h5.router.mode

'hash' | 'browser'

默认值:'hash'

配置路由模式。’hash’ 与 ‘browser’ 分别对应 hash 路由模式和浏览器 history 路由模式。

例子:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. router: {
  6. mode: 'hash' // 或者是 'browser'
  7. }
  8. }
  9. }

针对上面的配置,调用 Taro.navigateTo({ url: '/pages/index/index' }) 后,浏览器地址栏将被变为:

  • https://{{domain}}/#/pages/index/indexhash 模式)
  • https://{{domain}}/pages/index/indexbrowser 模式)

h5.router.basename

string

配置路由基准路径。

例子:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. router: {
  6. basename: '/myapp'
  7. }
  8. }
  9. }

针对上面的配置,调用 Taro.navigateTo({ url: '/pages/index/index' }) 后,浏览器地址栏将被变为:

  • https://{{domain}}/#/myapp/pages/index/indexhash 模式)
  • https://{{domain}}/myapp/pages/index/indexbrowser 模式)

h5.router.customRoutes

object

配置自定义路由。

例子:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. router: {
  6. customRoutes: {
  7. '/pages/index/index': '/index'
  8. }
  9. }
  10. }
  11. }

针对上面的配置,调用 Taro.navigateTo({ url: '/pages/index/index' }) 后,浏览器地址栏将被变为:

  • https://{{domain}}/#/indexhash 模式)
  • https://{{domain}}/myapp/indexbrowser 模式)

h5.enableSourceMap

boolean

默认值:watch 模式下为 true,否则为 false

用于控制是否生成 js、css 对应的 sourceMap。

h5.sourceMapType

string

默认值:'cheap-module-eval-source-map'

具体配置请参考 Webpack devtool 配置

h5.enableExtract

boolean

默认值:watch 模式下为 false,否则为 true

extract 功能开关,开启后将使用 mini-css-extract-plugin 分离 css 文件,可通过 h5.miniCssExtractPluginOption 对插件进行配置。

h5.esnextModules

array

配置需要额外的经由 Taro 预设的 postcss 编译的模块。

假设需要对 taro-ui 里的样式单位进行转换适配:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. // 经过这一配置之后,代码中引入的处于 `node_modules/taro-ui/` 路径下的样式文件均会经过 postcss 的编译处理。
  6. esnextModules: ['taro-ui']
  7. }
  8. }

h5.postcss

object

配置 postcss 相关插件。

h5.postcss.autoprefixer

object

可以进行 autoprefixer 的配置。配置项参考官方文档,例如:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. postcss: {
  6. autoprefixer: {
  7. enable: true,
  8. config: {
  9. /* autoprefixer 配置项 */
  10. }
  11. }
  12. }
  13. }
  14. }

h5.postcss.pxtransform

object

可以进行 pxtransform 的配置。配置项参考官方文档,例如:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. postcss: {
  6. pxtransform: {
  7. enable: true,
  8. config: {
  9. /* pxtransform 配置项 */
  10. }
  11. }
  12. }
  13. }
  14. }

h5.postcss.cssModules

object

可以进行 CSS Modules 配置,配置如下:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. postcss: {
  6. // css modules 功能开关与相关配置
  7. cssModules: {
  8. enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
  9. config: {
  10. namingPattern: 'module',
  11. generateScopedName: '[name]__[local]___[hash:base64:5]'
  12. }
  13. }
  14. }
  15. }
  16. }

h5.styleLoaderOption

object

style-loader 的附加配置。配置项参考官方文档,例如:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. styleLoaderOption: {
  6. insertAt: 'top'
  7. }
  8. }
  9. }

h5.cssLoaderOption

object

css-loader 的附加配置。配置项参考官方文档,例如:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. cssLoaderOption: {
  6. localIdentName: '[hash:base64]'
  7. }
  8. }
  9. }

h5.sassLoaderOption

object

sass-loader 的附加配置。配置项参考官方文档,例如:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. sassLoaderOption: {
  6. implementation: require("dart-sass")
  7. }
  8. }
  9. }

h5.lessLoaderOption

object

less-loader 的附加配置。配置项参考官方文档,例如:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. lessLoaderOption: {
  6. strictMath: true,
  7. noIeCompat: true
  8. }
  9. }
  10. }

h5.stylusLoaderOption

object

stylus-loader 的附加配置。配置项参考官方文档

h5.miniCssExtractPluginOption

object

mini-css-extract-plugin 的附加配置,在 h5.enableExtract 配置true 的情况下生效。

配置项参考官方文档,例如:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. miniCssExtractPluginOption: {
  6. filename: 'css/[name].css',
  7. chunkFilename: 'css/[id].css'
  8. }
  9. }
  10. }

h5.imageUrlLoaderOption

object

针对 png | jpg | jpeg | gif | bpm | svg 文件的 url-loader 配置。配置项参考官方文档

h5.mediaUrlLoaderOption

object

针对 mp4 | webm | ogg | mp3 | wav | flac | aac 文件的 url-loader 配置。配置项参考官方文档,例如:

  1. module.exports = {
  2. // ...
  3. h5: {
  4. // ...
  5. mediaUrlLoaderOption: {
  6. limit: 8192
  7. }
  8. }
  9. }

h5.fontUrlLoaderOption

object

针对 woff | woff2 | eot | ttf | otf 文件的 url-loader 配置。配置项参考官方文档