webpack插件篇-根据环境替换cdn链接中的react版本

1、需求背景：

微前端架构中，子应用开发我们采用了基座下发的方式，子应用开发时，拉取sim环境基座，保证子应用代码环境的统一性，方便调试与问题发现。
问题：
1、在实际代码实现过程中发现，子应用本地开发的热更新功能变得不可用，经过debug发现原因是基座使用的是production版本的react，而react热更新相关的代码只在开发环境中，故导致了没有热更新
2、由于是react生产版本，其常见的开发环境中的警告未能出现，比如for循环式key重复等等。

2、解决方案：

编写一个webpack插件，根据环境拉取不同的react版本,其中使用的是html-webpack-plugin提供的钩子，在生成inde.html前修改其内容。
注意：
1、只有sim环境才有此需求，因为我们子应用开发拉取的是sim环境的基座。
2、只有sim环境的时候，且是微应用本地开发模式下才需要替换react位开发版本
3、production版本和development版本的react相关库，需要同时上传cdn，并且以production和development文件名区分，以方便替换

3、代码实现

cdn常量文件

module.exports = {
   jsList: [
      'https://[email protected]', 
      // 最终会被替换成：https://[email protected]
      'https://[email protected]',
      // 最终会被替换成：https://[email protected]
      '...'
   ]
}

请确保生产版本和开发版本的cdn资源都存在，并且URL只有production和development的区别

插件使用：webpack.config.js

module.exports = {
  ...,
  plugins: [
    IS_SIM_BUILD_ENV && new ReplaceReactHtmlPlugin({ cdn: { jsList } })
  ]
}

插件代码：

/**
 * 本地开发替换react为开发版本
 * sim环境下，判断host及pathname判断替换react为开发版本，确保子应用开发模式下拉取sim基座时使用dev版本
 * @author ethanqiang
 * @create 2021-12-07
 */
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development'

class MyPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync('MyPlugin', (data, cb) => {
        let cndJSList = data.plugin.options?.cdn?.jsList
        if (!Array.isArray(cndJSList)) return cb(null, data)
        let jsList = [...cndJSList]
        if (isDev) {
          jsList = jsList.map(item => {
            if (/\/react/.test(item)) {  // 本地开发只需要将react的版本切换为开发版本即可
              return item.replace('production', 'development')
            }
            return item
          })
          data.assets.js = jsList.concat(data.assets.js)
        } else {
          // sim环境需要生成generate文件，根据host拉取不同版本的react库
          const file = this.renderFile(JSON.stringify(jsList.concat(data.assets.js)))
          const fileName = `micro-base-static/js/generate.${Date.now()}.js`
          compilation.assets[fileName] = {
            source: () => file,
            size: () => file.length,
            map: () => ({
              sources: []
            })
          }
          data.assets.js = [`${process.env.OE_BRANCH_NAME ? `/${process.env.OE_BRANCH_NAME}/` : '/'}${fileName}`]
        }
        data.plugin.options.cdn.jsList = [] // 删除cdn资源，因为资源已都从generate.js中动态插入
        cb(null, data)
      })
    })
  }
  renderFile(jsArray) {
    return `(function (jsArray) {
       var location = window.location
       jsArray.forEach(function(js){
         if (location.host.indexOf('local') > -1 && location.pathname.indexOf('/proxy') > -1 && /\\/react.*\\.production\\.min/.test(js)) {
           js = js.replace('production','development')
         }
         var script = document.createElement('script')
         script.src = js
         script.async = false
         script.type = 'text/javascript'
         document.head.appendChild(script)
       })
     })(${jsArray})`
  }
}

module.exports = MyPlugin

注意点：由于动态创建的script标签默认是异步加载的，即其async属性为true，会导致js执行顺序非指定顺序，故需要加上这句：

script.async = false

至此，完成。