不小心將 Webpack 升級后我搞定了微前端。
嗨，我是你穩(wěn)定更新、持續(xù)輸出的勾勾。
今天項(xiàng)目升級的時(shí)候，把 Webpack 升級了一個(gè)版本。瞬間讓我囧大了，你懂的，我就不說了。反正給我一頓操作啊，終于擺平了。
再梳理項(xiàng)目的時(shí)候，我用 Webpack 新版本的模塊聯(lián)邦還真實(shí)現(xiàn)了應(yīng)用程序和應(yīng)用程序之間的引用。一個(gè)微前端的雛形就出現(xiàn)了！
借這個(gè)機(jī)會(huì)，剛好把 Webpack 的微前端實(shí)現(xiàn)流程介紹一下。
創(chuàng)建兩個(gè)應(yīng)用
既然是應(yīng)用和應(yīng)用之間的引用，所以我們就創(chuàng)建兩個(gè)項(xiàng)目，一個(gè)叫 app，一個(gè)叫 slide。
app 項(xiàng)目的配置文件 webpack.config.js 內(nèi)容如下：
//app/webpack.config.jsconst 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:{ //導(dǎo)出"./App":"./src/App.js"}})]}
Slide 項(xiàng)目的配置文件 webpack.config.js 內(nèi)容如下：
const path = require("path")const HtmlWebpackPlugin = require("html-webpack-plugin")// 模塊聯(lián)邦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"}})]}
重點(diǎn)
在 ModuleFederationPlugin 實(shí)例化的時(shí)候傳入?yún)?shù) options 的字段說明。
name 模塊名
library 目前看到的用法有 { type: "var" } { type: "commonjs-module" }，可以用來指定模塊的使用規(guī)范
remotes 需要依賴的模塊名
exposes 暴露出的模塊，可以有多個(gè)
shared app 打包暴露模塊時(shí)，不會(huì)將 shared 打包，是兩個(gè)應(yīng)用的共享依賴，比如 react vue 等
注意：library 是對外導(dǎo)出的一種規(guī)范，前端使用 {type:"var"}。在引入的應(yīng)用程序中這個(gè)字段不要加哈，不然會(huì)不顯示內(nèi)容，而被引入模塊可以加上。
還有就是 exposes 和 remotes 的字段小伙伴們也要注意。
exposes 的暴露字段要寫上 ./name
remotes 的字段跟暴露模塊的 name 保持一致，里面別名的定義也要一致
最后，兩個(gè)應(yīng)用同時(shí)啟動(dòng)，就會(huì)發(fā)現(xiàn)最終你要的應(yīng)用就把其他應(yīng)用的模塊也引入進(jìn)來了(●'?'●)。
喜歡的小伙伴可以 fork 去(? ?_?)?。
https://github.com/cuiweijun/moduleFederation
推薦閱讀：
前端人因?yàn)?Vue3 的 Ref-sugar 提案打起來了！
點(diǎn)點(diǎn)“贊”和“在看”，保護(hù)頭發(fā)，減少bug。