进阶配置

QRN-Web 在提供了默认配置的情况下还提供了进阶配置，包括生成的 index.html 中标题、自定义脚本以及打包过程的 webpack 配置等。

如何启用进阶配置

如果需要用到进阶配置，需要在项目根目录新建一个 qrn-web.config.js 的配置文件，该文件需要导出一个配置对象，各个参数的意义在自定义配置中有详细介绍，这个参数对象的结构如下：

  1. module.exports = {
  2.   // 自定义 webpack 配置
  3.   webpackConfig: {},
  4.   // html-webpack-plugin 配置
  5.   htmlConfig: {
  6.       // 以下几项配置不可改变
  7.       inject: false,
  8.       template: require('html-webpack-template'),
  9.       appMountId: 'rootTag',
  10.       filename: 'index.html',
  11.       mobile: true,
  12.       lang: 'zh-CN',
  14.       // 以下配置可以自定义
  15.       appMountHtmlSnippet: '<div class="app-spinner"><i class="icon-loading" aria-hidden="true"></i></div>',
  16.       headHtmlSnippet: '<style>div.app-spinner {position: fixed;top:50%;left:50%;}</style >',
  17.       bodyHtmlSnippet: '<custom-element></custom-element>',
  18.       baseHref: 'https://www.qunar.com',
  19.       meta: [
  20.         {
  21.           name: 'description',
  22.           content: '聪明你的旅行'
  23.         }
  24.       ],
  25.       links: [
  26.         'https://q.qunarzz.com/some-stylesheet.css',
  27.         {
  28.           href: '/apple-touch-icon.png',
  29.           rel: 'apple-touch-icon',
  30.           sizes: '180x180'
  31.         },
  32.         {
  33.           href: '/favicon-32x32.png',
  34.           rel: 'icon',
  35.           sizes: '32x32',
  36.           type: 'image/png'
  37.         }
  38.       ],
  39.       scripts: [
  40.         'https://q.qunarzz.com/somescript.js',
  41.         {
  42.           src: '/myModule.js',
  43.           type: 'module'
  44.         }
  45.       ],
  46.       title: '去哪儿网',
  47.       window: {
  48.         env: {
  49.           apiHost: 'https://api.com'
  50.         }
  51.       }
  52.     }
  53. }

默认配置

  1. // 默认的 HTML 配置
  2. module.exports = {
  3.   inject: false,
  4.   template: require('html-webpack-template'),
  5.   title: '去哪儿网 - 聪明你的旅行',
  6.   filename: 'index.html',
  7.   appMountId: 'rootTag',
  8.   lang: 'zh-CN',
  9.   mobile: true
  10. };
  • inject: true 表示会将所有的 JavaScript 资源都插入到 body 中。
  • template: require('html-webpack-template') 表示不使用自定义模板。
  • title: 文档的默认标题。
  • filename: index.html 表示文档的文件名为 index.html。
  • lang: 文档的语言为简体中文。
  • mobile: true 会插入以下 meta 标签，不需要额外添加：
    • <meta charset="utf-8">
    • <meta content="ie=edge" http-equiv="x-ua-compatible">
    • <meta content="width=device-width, initial-scale=1" name="viewport">

自定义配置

  • appMountHtmlSnippet: 插入应用挂载点（即 appMountId 所指定的 div 元素）中的 HTML 片段。
  • headHtmlSnippet: 插入 head 标签中的 HTML 片段。
  • bodyHtmlSnippet: 插入 body 标签中的 HTML 片段。
  • baseHref: 调整文档中包含的所有相对 URL 的基础 URL，参见 MDN。
  • meta: 一个对象数组，每个对象对应一个 meta 标签，其 key-value 会被写入到 meta 标签的属性中。
  • links: 一个数组，数组的每个元素对应一个 link 标签。
    • 如果元素是一个字符串，则其所对应的 link 标签的 href 属性将会直接设置为该字符串，然后其 rel 属性会被设置为 stylesheet。
    • 如果元素是一个对象，则该对象的所有 key-value 会被设置为 link 标签的属性。
  • scripts: 一个数组，数组的每个元素对应一个 script 标签。如果业务用到了自定义的 API 比如 ucAPI，就可以在此将其加入进去。
    • 如果元素是一个字符串，则其所对应的 script 标签的 src 属性将会直接设置为该字符串，然后其 type 属性会被设置为 text/javascript。
    • 如果元素是一个对象，则该对象的所有 key-value 会被设置为 script 标签的属性。
  • title: 设置文档的标题。
  • window: 要设置到 window 对象上的数据。