进阶配置

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

如何启用进阶配置

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

module.exports = {
  // 自定义 webpack 配置
  webpackConfig: {},
  // html-webpack-plugin 配置
  htmlConfig: {
      // 以下几项配置不可改变
      inject: false,
      template: require('html-webpack-template'),
      appMountId: 'rootTag',
      filename: 'index.html',
      mobile: true,
      lang: 'zh-CN',

      // 以下配置可以自定义
      appMountHtmlSnippet: '<div class="app-spinner"><i class="icon-loading" aria-hidden="true"></i></div>',
      headHtmlSnippet: '<style>div.app-spinner {position: fixed;top:50%;left:50%;}</style >',
      bodyHtmlSnippet: '<custom-element></custom-element>',
      baseHref: 'https://www.qunar.com',
      meta: [
        {
          name: 'description',
          content: '聪明你的旅行'
        }
      ],
      links: [
        'https://q.qunarzz.com/some-stylesheet.css',
        {
          href: '/apple-touch-icon.png',
          rel: 'apple-touch-icon',
          sizes: '180x180'
        },
        {
          href: '/favicon-32x32.png',
          rel: 'icon',
          sizes: '32x32',
          type: 'image/png'
        }
      ],
      scripts: [
        'https://q.qunarzz.com/somescript.js',
        {
          src: '/myModule.js',
          type: 'module'
        }
      ],
      title: '去哪儿网',
      window: {
        env: {
          apiHost: 'https://api.com'
        }
      }
    }
}

默认配置

// 默认的 HTML 配置
module.exports = {
  inject: false,
  template: require('html-webpack-template'),
  title: '去哪儿网 - 聪明你的旅行',
  filename: 'index.html',
  appMountId: 'rootTag',
  lang: 'zh-CN',
  mobile: true
};

• 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 对象上的数据。