kef-builder-buffet/webpack/cfg/html.js

buffet-builder构建工具

'use strict';

const url = require('url');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const CONST = require('../../utils/const');
const BUILDER_ENV = require('../../utils/env');
const getEntry = require('../../utils/getEntry');

const SRC_PATH = CONST.SRC_PATH;
const BUILD_PATH = CONST.BUILD_PATH;
const CDN_BASE = CONST.CDN_BASE;
const BUILD_DEBUG = BUILDER_ENV.BUILD_DEBUG;
const BUILD_GIT_GROUP = BUILDER_ENV.BUILD_GIT_GROUP;
const BUILD_GIT_PROJECT = BUILDER_ENV.BUILD_GIT_PROJECT;
const BUILD_GIT_BRANCH = BUILDER_ENV.BUILD_GIT_BRANCH;
const BUILD_DEBUG_PORT = BUILDER_ENV.BUILD_DEBUG_PORT;
const BUILD_GIT_VERSION = BUILD_GIT_BRANCH == undefined ? undefined : BUILD_GIT_BRANCH.split(path.sep).pop();

module.exports = function (config, argv) {

  config.plugins = config.plugins || [];

  let htmlWebpackPlugins = [];
  let entries = getEntry(CONST.abcData);
  
  if (CONST.isSinglePageApp) {
    let cdnBase = '//127.0.0.1:' + BUILD_DEBUG_PORT;
    if (!BUILD_DEBUG) {
      // TODO: 根据版本号发布
      cdnBase = `${CDN_BASE}${BUILD_GIT_GROUP}/${BUILD_GIT_PROJECT}/${BUILD_GIT_VERSION}`;
    }
    htmlWebpackPlugins.push(new HtmlWebpackPlugin({
      buildOptions: {
        debug: BUILD_DEBUG,
        resourceBase: cdnBase,
      },
      // filename 单页应用就保持跟编译目录一致 多页需要区分不同page /page/index.html
      filename: path.join(BUILD_PATH, 'index.html'),
      inject: false,
      template: path.join(SRC_PATH, 'index.html')
    }));
  } else {
    Object.keys(entries).forEach(function (entryKey) {
      // 获取当前的html文件
      // pageName反转去除 index
      // TODO: add getEntryHtml 这里反转得到page path不可靠
      let entryArr = entryKey.split('/');
      entryArr.pop()
      let entryPath = entryArr.join('/');
      // TODO: 后续这里要添加host代码的域名来替代ip
      // common对cdn的地址与pageDir无关，page级别的js跟dir有关系
      // url.resolve以一种 Web 浏览器解析超链接的方式把一个目标 URL 解析成相对于一个基础 URL
      let cdnBase = url.resolve('//127.0.0.1:' + BUILD_DEBUG_PORT, entryPath);
      let commonBase = '//127.0.0.1:' + BUILD_DEBUG_PORT;

      // build 环境下引用的路径都要变成 cdn 路径哦
      if (!BUILD_DEBUG) {
        cdnBase = `${CDN_BASE}${BUILD_GIT_GROUP}/${BUILD_GIT_PROJECT}/${BUILD_GIT_VERSION}/${entryPath}`;
        commonBase = `${CDN_BASE}${BUILD_GIT_GROUP}/${BUILD_GIT_PROJECT}/${BUILD_GIT_VERSION}`;
      }
      // htmlWebpackPlugin  可以自动的创建 html  文件 动态的引用文件名包含 hash 值得文件
      htmlWebpackPlugins.push(new HtmlWebpackPlugin({
        buildOptions: {
          debug: BUILD_DEBUG,
          resourceBase: cdnBase,
          resourceCommon: commonBase,
        },
        // filename 单页应用就保持跟编译目录一致 多页需要区分不同page /page/index.html
        filename: path.join(BUILD_PATH, entryPath, 'index.html'),
        inject: false,
        template: path.join(SRC_PATH, entryPath, 'index.html')
      }));
    })
  }

  config.plugins = config.plugins.concat(htmlWebpackPlugins);
}