pws-hub / module-federation-webpack Goto Github PK

// webpack.config.js
const MF = require("mf-webpack4")
module.exports = {
  plugins: [

    new MF({
      remotes: {
        "app2": "app2@http://localhost:9002/remoteEntry.js"
      },
      name: "app1",
      filename: "remoteEntry.js",
      shared: {
        "react": {
          singleton: true,
          requiredVersion: "16",
          strictVersion: true
        },
        "react-dom": {
          singleton: false,
        }
      },
      exposes: {
        "./App": "./src/App"
      }
    })

  ]
}

// 1. __webpack_init_sharing__ 
await require("module-federation-runtime").initSharing("default")

// 2. __webpack_share_scopes__ 
require("module-federation-runtime").shareScopes

// 3. dynamic-remotes
await require("module-federation-runtime").registerRemotes({
  "mfapp01": {
    url: "https://cdn.jsdelivr.net/npm/mf-app-01/dist/remoteEntry.js"
  },
})
const AppFactory = await findModule("mfapp01", "./App")
AppFactory()

1. shared: ["react"]
2. shared: {react: "17.0.2"}
3. shared: {react: {"import", eager, requiredVersion, shareScope, singleton, version}}

remotes: {
    "app2": "app2@http://localhost:9002/remoteEntry.js",
    "promiseRemote": `promise new Promise(resolve => resolve({
      init() {},
      get() {
        return function () {
          return {
            promiseRemote: "aaaa"
          }
        }
      }
    }))`
}

exposes: {
    "./App": "./src/App"
}

// vue.config.js
const MF = require("mf-webpack4")

module.exports = {
  // TODO: 1. parallel = false
  // It is suspected that there is a bug in the cooperation between "webpack-virtual-modules" and "thread-loader", and an error will be reported during the packaging stage
  parallel: false,
  chainWebpack(chain) {
    // TODO: 2. clear splitChunks
    // The splitChunks strategy of vue-cli needs to be used in conjunction with index.html, and main.js, chunks.js... are loaded at the entry. The entry of MF has only one file remoteEntry.js, the policy conflicts and needs to be reset
    chain.optimization.splitChunks().clear()
    
    chain.plugin("moduleFederation")
      .use(MF, [{
        name: "vueCliRemote",
        shared: ["vue"],
        exposes: {
          "./App": "src/App.vue"
        }
      }])
  },
}