背景: 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 在部署完成後只需要不刪除之前的版本資源包；然後放置加載最新的資源包即可