如何仅引入remoteEntry.js实现Module Federation构建的Vanilla JS应用？

要实现只引入remoteEntry.js即可使用应用，核心是让模块联邦自动触发业务逻辑和样式的加载，而非手动引入多个资源文件。以下是两种可行方案：

方案1：合并样式与业务入口（最简方案） #

如果不需要严格拆分样式和业务代码，直接将样式引入业务入口即可：

1. 修改业务入口文件
   编辑src/index.js，直接引入样式文件，删除单独的styles.js：

   // src/index.js
   import './scss/signing-widget.scss';
   import './lib/myApp.js';
   

2. 更新Webpack配置
   移除独立的styles入口，仅保留业务入口，并调整ModuleFederationPlugin配置：

   module.exports = {
     entry: {
       index: ['./src/index.js'], // 仅保留合并后的业务入口
     },
     output: {
       // 确保publicPath配置正确，让remoteEntry能加载其他chunk
       publicPath: 'http://path-to-my-app/',
     },
     module: {
       rules: [
         // 配置Sass加载器，确保样式被注入页面（使用style-loader）
         {
           test: /\.scss$/,
           use: ['style-loader', 'css-loader', 'sass-loader'],
         },
         // 其他loader配置...
       ],
     },
     plugins: [
       new ModuleFederationPlugin({
         name: 'myApp',
         filename: 'remoteEntry.js',
         exposes: {
           './myApp': './src/index.js' // 仅暴露合并后的业务模块
         },
         shared: require('./package.json').dependencies,
       })
     ],
     // 其他配置...
   };
   

3. 宿主页面使用
   现在只需引入remoteEntry.js即可，Webpack会自动加载业务chunk并注入样式：

   <html>
     <head>
       <script defer src="http://path-to-my-app/remoteEntry.js"></script>
     </head>
     <body>
         <my-app></my-app>
     </body>
   </html>
   

方案2：保留样式与业务拆分，通过统一入口加载 #

如果必须保留样式和业务的独立文件，可以创建一个统一的启动入口，让模块联邦自动加载两者：

1. 创建启动入口文件
   新建src/bootstrap.js，同时引入业务逻辑和样式：

   // src/bootstrap.js
   import './lib/myApp.js';
   import './scss/signing-widget.scss';
   

2. 修改业务入口为动态加载
   编辑src/index.js，通过动态导入触发启动逻辑：

   // src/index.js
   // 动态导入确保模块联邦初始化完成后再加载应用
   import('./bootstrap.js');
   

3. 更新Webpack配置
   移除styles入口，仅保留index入口，确保publicPath正确：

   module.exports = {
     entry: {
       index: ['./src/index.js'],
     },
     output: {
       publicPath: 'http://path-to-my-app/',
     },
     module: {
       rules: [
         {
           test: /\.scss$/,
           use: ['style-loader', 'css-loader', 'sass-loader'],
         },
         // 其他loader配置...
       ],
     },
     plugins: [
       new ModuleFederationPlugin({
         name: 'myApp',
         filename: 'remoteEntry.js',
         exposes: {
           './myApp': './src/index.js'
         },
         shared: require('./package.json').dependencies,
       })
     ],
     // 其他配置...
   };
   

4. 宿主页面使用
   同样只需引入remoteEntry.js即可，模块联邦会自动加载index.js，进而触发bootstrap.js加载业务和样式。

关键注意事项 #

• 确保output.publicPath配置正确，否则remoteEntry.js无法找到应用的chunk文件。
• 使用style-loader会将样式注入到页面的<style>标签中，如果需要单独生成CSS文件，可以配合mini-css-extract-plugin，但需要额外配置让Webpack自动加载CSS文件（比如在业务入口中引入生成的CSS，或使用插件自动注入）。

内容的提问来源于stack exchange，提问作者ClydeFrog