const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); const mf = require("@angular-architects/module-federation/webpack"); const path = require("path"); const share = mf.share; const sharedMappings = new mf.SharedMappings(); sharedMappings.register(path.join(__dirname, "tsconfig.json"), []); module.exports = { output: { uniqueName: "mfe1", publicPath: "http://localhost:3001/", }, optimization: { runtimeChunk: false, }, resolve: { alias: { ...sharedMappings.getAliases(), }, }, plugins: [ new ModuleFederationPlugin({ name: "mfe1", filename: "remoteEntry.js", exposes: { "./Module": "./src/app/microfrontend/microfrontend.module.ts", }, shared: share({ "assets/img": { eager: true }, "@angular/core": { singleton: true, strictVersion: true, requiredVersion: "auto", }, "@angular/common": { singleton: true, strictVersion: true, requiredVersion: "auto", }, "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: "auto", }, "@angular/router": { singleton: true, strictVersion: true, requiredVersion: "auto", }, "my-shared": { singleton: true, strictVersion: true, import: "my-shared", // 对应库的npm包名或本地路径 requiredVersion: "*", // 或者具体的版本号,如"0.0.1" }, ...sharedMappings.getDescriptors(), }), }), sharedMappings.getPlugin(), ], module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: "url-loader", options: { limit: 8192, // 将小于 8kb 的图片转为 base64 }, }, ], }, ], }, };