ExternalTemplateRemotesPlugin core concepts

  • Define urls at run time
  • Better implementation of version cache, dynamic cache

Specific as follows

The configuration fileemp-config.js

// Subsequent considerations include packages
const ExternalTemplateRemotesPlugin = require('./ExternalTemplateRemotesPlugin')
/ * * *@type {import('@efox/emp-cli').EMPConfig}* /
module.exports = {
  webpackChain(config) {
    / / use ExternalTemplateRemotesPlugin
    config.plugin('ExternalTemplateRemotesPlugin').use(ExternalTemplateRemotesPlugin)
  },
  moduleFederation: {
    remotes: {
      @ emp / / / 'not' : 'not' @ http://localhost:8001/emp.js, / / the code before
      '@emp/demo1': 'demo1@[window.demo1Url]/emp.js',,}}}Copy the code

Code entry filesrc/index.ts

// demo1Url can be introduced by adding math.random () or verson, etc; (window as any).demo1Url = 'http://localhost:8001'
import('./bootstrap')
Copy the code

The instance

conclusion

For dynamic reference schemes, we can make better use of various complex scenarios such as:

  • Many versions
  • Clear the cache
  • Development, formal environment switch
  • More and moreYou write it!