编译配置详情 - h5 - 《Taro v3.0 使用教程》

h5

专属于 H5 的配置。

h5.entry

object

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

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

h5.output

object

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

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

h5.publicPath

string

默认值：'/'

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

h5.staticDirectory

string

默认值：'static'

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

h5.chunkDirectory

string

默认值：'chunk'

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

h5.devServer

object

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

例子：

修改端口：

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

开启 https 服务：

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

h5.webpackChain

function

自定义 Webpack 配置。

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

例子：

// 这是一个添加 raw-loader 的例子，用于在项目中直接引用 md 文件
module.exports = {
  // ...
  h5: {
    // ...
    webpackChain (chain, webpack) {
      chain.merge({
        module: {
          rules: {
            myloader: {
              test: /\.md$/,
              use: [{
                loader: 'raw-loader',
                options: {}
              }]
            }
          }
        }
      })
    }
  }
}

// 这是一个添加插件的例子
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

路由相关的配置。

h5.router.mode

'hash' | 'browser'

默认值：'hash'

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

例子：

module.exports = {
  // ...
  h5: {
    // ...
    router: {
      mode: 'hash' // 或者是 'browser'
    }
  }
}

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

https://{{domain}}/#/pages/index/index（hash 模式）
https://{{domain}}/pages/index/index（browser 模式）

h5.router.basename

string

配置路由基准路径。

例子：

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

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

https://{{domain}}/#/myapp/pages/index/index（hash 模式）
https://{{domain}}/myapp/pages/index/index（browser 模式）

h5.router.customRoutes

object

配置自定义路由。

例子：

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

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

https://{{domain}}/#/index（hash 模式）
https://{{domain}}/myapp/index（browser 模式）

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 里的样式单位进行转换适配：

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

h5.postcss

object

配置 postcss 相关插件。

h5.postcss.autoprefixer

object

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

module.exports = {
  // ...
  h5: {
    // ...
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
          /* autoprefixer 配置项 */
        }
      }
    }
  }
}

h5.postcss.pxtransform

object

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

module.exports = {
  // ...
  h5: {
    // ...
    postcss: {
      pxtransform: {
        enable: true,
        config: {
          /* pxtransform 配置项 */
        }
      }
    }
  }
}

h5.postcss.cssModules

object

可以进行 CSS Modules 配置，配置如下：

module.exports = {
  // ...
  h5: {
    // ...
    postcss: {
      // css modules 功能开关与相关配置
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module',
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

h5.styleLoaderOption

object

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

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

h5.cssLoaderOption

object

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

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

h5.sassLoaderOption

object

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

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

h5.lessLoaderOption

object

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

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

h5.stylusLoaderOption

object

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

h5.miniCssExtractPluginOption

object

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

配置项参考官方文档，例如：

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

h5.imageUrlLoaderOption

object

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

h5.mediaUrlLoaderOption

object

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

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

h5.fontUrlLoaderOption

object

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