Webpack 模块联合在应用程序之间热重载

如何解决Webpack 模块联合在应用程序之间热重载

我开始尝试使用 webpack 模块联合的微前端。 这是出于一个非常特殊的目的，因为在我们公司，我们开发了像仪表板这样的大型软件来响应基于角色的访问控制，我希望每个部分（或几乎）都是一个单独的应用程序。

所以我设法实现了一切，只是我注意到当我修改远程应用程序时没有完成应用程序容器的自动重新加载。我能理解为什么，但我想知道是否有办法修改它？知道我不能只在远程应用程序上工作，因为它使用应用程序容器的冗余提供程序...

这里是我的应用容器的 webpack 配置：

const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
  .ModuleFederationPlugin;
const path = require("path");
const deps = require("./package.json").dependencies;

module.exports = {
  entry: "./src/index",target:"web",mode: "development",devServer: {
    contentBase: path.join(__dirname,"dist"),port: 3001,hot:true
  },output: {
    publicPath: "auto",},resolve: {
    extensions: [".js",".jsx",".json",".ts",".tsx"],module: {
    rules: [
      {
        test: /bootstrap\.tsx$/,loader: "bundle-loader",options: {
          lazy: true,{
        test: /\.tsx?$/,loader: "babel-loader",exclude: /node_modules/,options: {
          plugins: ['react-refresh/babel'],presets: ["@babel/preset-react","@babel/preset-typescript"],{
        enforce: "pre",test: /\.js$/,loader: "source-map-loader",{
        test: /\.css$/,use: [
          'style-loader',{
            loader: 'css-loader',options: {
              importLoaders: 2,sourceMap: true,{
              loader: 'postcss-loader',options: {
                options: {}
              }
            },],{
        test: /\.s[ac]ss$/i,'css-loader','resolve-url-loader','sass-loader',{
        test: /\.(png|svg|jpg|gif)$/,use: [
          'file-loader',plugins: [
    new ModuleFederationPlugin({
      name: "appshell",filename: "remoteEntry.js",remotes: {
        mfsectors: "mfsectors@http://localhost:3002/remoteEntry.js",exposes: {
        "./routes": "./src/routes","./src/store/**": "./src/store"
      },shared: {
        ...deps,react: {
          eager: true,singleton: true,requiredVersion: deps.react,"react-dom": {
          eager: true,requiredVersion: deps["react-dom"],}),new HtmlWebpackPlugin({
      template: "./public/index.html",new ReactRefreshPlugin({
      exclude: [/node_modules/,/bootstrap\.tsx$/],};

这里是我的应用远程 webpack 配置：

const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
  .ModuleFederationPlugin;
const path = require("path");
const deps = require("./package.json").dependencies;

module.exports = {
  entry: "./src/index.ts",port: 3002,plugins: [
    new ModuleFederationPlugin({
      name: "mfsectors",remotes: {
        appshell: "appshell@http://localhost:3001/remoteEntry.js",};

谢谢！ 抱歉我的英语不好^^'