【发布时间】：2021-10-18 13:15:55
【问题描述】：
我正在尝试使用模块联合作为集成工具在微前端上实现 POC。我可以单独运行微前端（在端口 4001 上运行），但是当我尝试运行集成了微前端的主机应用程序（在端口 4000 上运行）时，它抛出错误，说它无法找到 MF 的依赖项，即 react-redux 和 redux 工具包，如下图所示。 主机应用程序没有 react-redux 和 redux 工具包作为依赖项，我不确定它为什么试图从端口 4000 而不是 4001 获取依赖项。我知道如何解决这个问题吗？
主机-webpack.config
const config: Configuration = {
mode: 'development',
output: {
publicPath: '/'
},
module: {
rules: [
{
test: /\.(ts|js)x?$/i,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
]
}
}
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
plugins: [
new ModuleFederationPlugin({
name: 'container',
remotes: {
mf1: 'mf1@http://localhost:4001/remoteEntry.js'
},
shared: [deps]
}),
new HtmlWebpackPlugin({
template: 'public/index.html'
}),
new HotModuleReplacementPlugin(),
new ForkTsCheckerWebpackPlugin({
async: false
}),
new ESLintPlugin({
extensions: ['js', 'jsx', 'ts', 'tsx']
})
],
devtool: 'inline-source-map',
devServer: {
static: path.join(__dirname, 'build'),
historyApiFallback: true,
port: 4000,
open: true
}
};
export default config;
MF-webpack.config.js
const config: Configuration = {
mode: 'development',
output: {
publicPath: '/'
},
entry: './src/index',
module: {
rules: [
{
test: /\.(ts|js)x?$/i,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
]
}
}
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
plugins: [
new ModuleFederationPlugin({
name: 'mf1',
filename: 'remoteEntry.js',
library: {type: 'var', name: 'mf1'},
exposes: {
'./Mf1App': './src/bootstrap'
},
shared: [deps]
}),
new HtmlWebpackPlugin({
template: 'public/index.html'
}),
new HotModuleReplacementPlugin(),
new ForkTsCheckerWebpackPlugin({
async: false
}),
new ESLintPlugin({
extensions: ['js', 'jsx', 'ts', 'tsx']
})
],
devtool: 'inline-source-map',
devServer: {
static: path.join(__dirname, 'build'),
historyApiFallback: true,
port: 4001,
open: true
}
};
export default config;
Host-package.json
{
"name": "container",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"start": "webpack serve --config config/webpack.dev.config.ts",
"build": "webpack --config config/webpack.prod.config.ts",
"lint": "eslint \"*/**/*.{js,ts,tsx}\"",
"lint:fix": "eslint \"*/**/*.{js,ts,tsx}\" --fix"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/plugin-transform-runtime": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@babel/runtime": "^7.15.4",
"@types/node": "^16.10.9",
"@types/react": "^17.0.29",
"@types/react-dom": "^17.0.9",
"@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"babel-loader": "^8.2.2",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-hooks": "^4.2.0",
"fork-ts-checker-webpack-plugin": "^6.3.4",
"html-webpack-plugin": "^5.3.2",
"prettier": "^2.4.1",
"ts-node": "^10.3.0",
"tsconfig-paths-webpack-plugin": "^3.5.1",
"webpack": "^5.58.2",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1",
"@types/fork-ts-checker-webpack-plugin": "^0.4.5",
"clean-webpack-plugin": "^3.0.0",
"typescript": "^4.4.4",
"eslint-webpack-plugin": "^2.4.1"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
MF1-package.json
{
"name": "microfrontend1",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"start": "webpack serve --config config/webpack.dev.config.ts",
"build": "webpack --config config/webpack.prod.config.ts",
"lint": "eslint \"*/**/*.{js,ts,tsx}\"",
"lint:fix": "eslint \"*/**/*.{js,ts,tsx}\" --fix"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/plugin-transform-runtime": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@babel/runtime": "^7.15.4",
"@types/node": "^16.10.9",
"@types/react": "^17.0.29",
"@types/react-dom": "^17.0.9",
"@types/webpack": "^5.28.0",
"@types/react-redux": "^7.1.19",
"@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"babel-loader": "^8.2.2",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-hooks": "^4.2.0",
"fork-ts-checker-webpack-plugin": "^6.3.4",
"html-webpack-plugin": "^5.3.2",
"prettier": "^2.4.1",
"ts-node": "^10.3.0",
"tsconfig-paths-webpack-plugin": "^3.5.1",
"webpack": "^5.58.2",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1",
"@types/fork-ts-checker-webpack-plugin": "^0.4.5",
"clean-webpack-plugin": "^3.0.0",
"typescript": "^4.4.4",
"eslint-webpack-plugin": "^2.4.1"
},
"dependencies": {
"@reduxjs/toolkit": "^1.6.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.5"
}
}
【问题讨论】：
标签： reactjs typescript webpack-module-federation