阅读 1876

不小心将 Webpack 升级后我搞定了微前端。

昨天项目升级的时候,把 Webpack 升级了一个版本。瞬间让我囧大了,你懂的,我就不说了。反正给我一顿操作啊,终于摆平了。

再梳理项目的时候,我用 Webpack 新版本的模块联邦还真实现了应用程序和应用程序之间的引用。一个微前端的雏形就出现了!

借这个机会,刚好把 Webpack 的微前端实现流程介绍一下。

创建两个应用

既然是应用和应用之间的引用,所以我们就创建两个项目,一个叫 app,一个叫 slide。

app 项目的配置文件 webpack.config.js 内容如下:

//app/webpack.config.js
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
//微前端的模块
const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;
module.exports = {
    mode:"development",
    devtool:false,
    entry:"./src/index.js",
    output:{
       filename:"build.js",
       path: path.resolve(__dirname,"dist")
    },
    devServer:{
        contentBase: path.join(__dirname, 'dist'),
        port:8081
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:"babel-loader"
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"webpack5",
            template:"./public/index.html"
        }),
        new ModuleFederationPlugin({
            name:"remote",
            // library:{type:"var",name:"remote"},
            filename:"remoteEntry.js",
            exposes:{  //导出
                "./App":"./src/App.js"
            }
        })
    ]

​}
复制代码

Slide 项目的配置文件 webpack.config.js 内容如下:

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 模块联邦
const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;
module.exports = {
    mode:"development",
    devtool:false,
    entry:"./src/index.js",
    output:{
        filename:"build.js",
       path: path.resolve(__dirname,"dist")
    },
    devServer:{
        contentBase: path.join(__dirname, 'dist'),
        port:3000
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:"babel-loader"
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"webpack5",
            template:"./public/index.html"
        }),
        new ModuleFederationPlugin({
            name:"slide",
            library:{type:"var",name:"slide"},
            remotes:{
                "remote":"remote@http://127.0.0.1:8081/remoteEntry.js"
            }
        })
    ]

​}
复制代码

重点

在 ModuleFederationPlugin 实例化的时候传入参数 options 的字段说明。

  • name 模块名

  • library 目前看到的用法有 { type: "var" } { type: "commonjs-module" },可以用来指定模块的使用规范

  • remotes 需要依赖的模块名

  • exposes 暴露出的模块,可以有多个

  • shared app 打包暴露模块时,不会将 shared 打包,是两个应用的共享依赖,比如 react vue 等

注意:library 是对外导出的一种规范,前端使用 {type:"var"}。在引入的应用程序中这个字段不要加哈,不然会不显示内容,而被引入模块可以加上。

还有就是 exposes 和 remotes 的字段小伙伴们也要注意。

  • exposes 的暴露字段要写上 ./name

  • remotes 的字段跟暴露模块的 name 保持一致,里面别名的定义也要一致

最后,两个应用同时启动,就会发现最终你要的应用就把其他应用的模块也引入进来了(●'◡'●)。

文章分类
前端
文章标签