小编and*_*asi的帖子

使用 webpack 5 和插件模块联盟使用微前端时,React.Lazy 不起作用

发生的情况是,我通过模块联合使用微前端,但即使使用 React.Lazy,捆绑包 (remoteEntry) 也会在应用程序启动时加载,而无需访问导入组件的路径。

要模拟该场景,您可以访问存储库并按照描述的步骤操作。单击此处访问。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const dependencies = require('./package.json').dependencies;
const ModuleFederationPlugin =
  require('webpack').container.ModuleFederationPlugin;
const path = require('path');
const dotenv = require('dotenv');

module.exports = (_, args) => {
  return {
    mode: args.mode,
    entry: './src/index.js',
    output: {
      filename:
        process.env.NODE_ENV === 'development'
          ? 'main.js'
          : 'main.[contenthash].js',
      publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/',
      path: path.resolve(__dirname, 'build')
    },
    devServer: {
      static: {
        directory: …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs webpack micro-frontend webpack-module-federation

8
推荐指数
1
解决办法
3202
查看次数