閱讀(1.6k) 書簽贊(0) 我要糾錯

Taro h5

2021-09-23 21:06 更新

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

默認(rèn)值：'/'

設(shè)置輸出解析文件的目錄。

h5.staticDirectory

string

默認(rèn)值：'static'

h5 編譯后的靜態(tài)文件目錄。

h5.chunkDirectory

string

默認(rèn)值：'chunk'

編譯后非 entry 的 js 文件的存放目錄，主要影響動態(tài)引入的 pages 的存放路徑。

h5.devServer

object

預(yù)覽服務(wù)的配置，可以更改端口等參數(shù)。具體配置參考 webpack-dev-server。

例子：

修改端口：

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

開啟 https 服務(wù)：

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

h5.webpackChain

function

自定義 Webpack 配置。

這個函數(shù)會收到兩個參數(shù)，第一個參數(shù)是 webpackChain 對象，可參考 webpack-chain 的 API 進(jìn)行修改，第二個參數(shù)是 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

路由相關(guān)的配置。

h5.router.mode

'hash' | 'browser'

默認(rèn)值：'hash'

配置路由模式?！痟ash’ 與 ‘browser’ 分別對應(yīng) hash 路由模式和瀏覽器 history 路由模式。

例子：

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

針對上面的配置，調(diào)用 Taro.navigateTo({ url: '/pages/index/index' }) 后，瀏覽器地址欄將被變?yōu)椋?/p>

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

h5.router.basename

string

配置路由基準(zhǔn)路徑。

例子：

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

針對上面的配置，調(diào)用 Taro.navigateTo({ url: '/pages/index/index' }) 后，瀏覽器地址欄將被變?yōu)椋?/p>

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'
      }
    }
  }
}

針對上面的配置，調(diào)用 Taro.navigateTo({ url: '/pages/index/index' }) 后，瀏覽器地址欄將被變?yōu)椋?/p>

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

h5.enableSourceMap

boolean

默認(rèn)值：watch 模式下為 true，否則為 false。

用于控制是否生成 js、css 對應(yīng)的 sourceMap。

h5.sourceMapType

string

默認(rèn)值：'cheap-module-eval-source-map'

具體配置請參考 Webpack devtool 配置。

h5.enableExtract

boolean

默認(rèn)值：watch 模式下為 false，否則為 true。

extract 功能開關(guān)，開啟后將使用 mini-css-extract-plugin 分離 css 文件，可通過 h5.miniCssExtractPluginOption 對插件進(jìn)行配置。

h5.esnextModules

array

配置需要額外的經(jīng)由 Taro 預(yù)設(shè)的 postcss 編譯的模塊。

假設(shè)需要對 taro-ui 里的樣式單位進(jìn)行轉(zhuǎn)換適配：

module.exports = {
  // ...
  h5: {
    // ...
    // 經(jīng)過這一配置之后，代碼中引入的處于 `node_modules/taro-ui/` 路徑下的樣式文件均會經(jīng)過 postcss 的編譯處理。
    esnextModules: ['taro-ui']
  }
}

h5.postcss

object

配置 postcss 相關(guān)插件。

h5.postcss.autoprefixer

object

可以進(jìn)行 autoprefixer 的配置。配置項參考官方文檔，例如：

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

h5.postcss.pxtransform

object

可以進(jìn)行 pxtransform 的配置。配置項參考官方文檔，例如：

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

h5.postcss.cssModules

object

可以進(jìn)行 CSS Modules 配置，配置如下：

module.exports = {
  // ...
  h5: {
    // ...
    postcss: {
      // css modules 功能開關(guān)與相關(guān)配置
      cssModules: {
        enable: false, // 默認(rèn)為 false，如需使用 css modules 功能，則設(shè)為 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 配置。配置項參考官方文檔。

以上內(nèi)容是否對您有幫助：

← Taro mini

Taro 插件功能 →

寫筆記

我要補(bǔ)充