webpack build打包保留历史版本资源包；解决部署后；客户端白屏问题

背景: taro+h5的项目; 每次build上线的时候; 如果这时候有人正在使用 h5页面 ；因为jenkins部署是直接替换掉原来的资源；导致 单页面应用 的页面找不到之前的资源；出现白屏、点击无反应、xxx is not defined 的情况

前端打包解决思路

1. 部署的时候不删除之前的资源包dist；以保证正在使用的客户端用户始终能找到对应的资源。
2. 将打包资源的文件夹名定义为 版本号名称； 比如 1.0.22 ；然后index.html中动态引入最新的文件夹资源

方案1 ：输出不同的版本包；然后copy 资源包的index.html到最外层目录；具体配置如下：

// config/index.js

import packageData from '../package.json'
const version = packageData.version || '1.0.0'

const config = {
  // 其他代码
  h5: {
    publicPath: `/${version}/`,
    staticDirectory: 'static',
    output: {
      path: path.resolve(__dirname, '..', `${version}`),
      filename: 'js/[name].[hash:8].js',
      chunkFilename: 'js/[name].[chunkhash:8].js'
    },
    // 其他代码
    // 自定义 Webpack 配置
    webpackChain (chain, webpack) {
      chain.plugin('copy-html').use(require('copy-webpack-plugin'), [{
          patterns: [
            { from: path.resolve(__dirname, `../${version}/index.html`), to: path.resolve(__dirname, `../index.html`) }
          ]
        }])
    }
  }
}

方案2： 直接打包输出不同的版本号资源包；然后index.html引入即可

// config/index.js

import packageData from '../package.json'
const version = packageData.version || '1.0.0'

const config = {
  // 其他代码
  h5: {
    publicPath: `/`,
    staticDirectory: `${version}/static`,
    output: {
        filename: `${version}/js/[name].js`,
        chunkFilename: `${version}/chunk/[name].js`
    }
  }
}

jenkins流程修改

jenkins 在部署完成后只需要不删除之前的版本资源包；然后放置加载最新的资源包即可