如何解决在 IIS 服务器中使用 webpack 部署 React 应用程序的白页
我正在尝试使用 ModuleFederationPlugin 和 webpack 部署基于微前端的 React Web 应用程序,但是当我尝试单独部署其中一个微前端时,我得到一个没有错误的白页。
我的 webpack 配置到生产:
const { merge } = require('webpack-merge')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
const commonConfig = require('./webpack.common')
const packageJson = require('../package.json')
const prodConfig = {
mode: 'production',output: {
filename: '[name].[contenthash].js',publicPath: '/Microfrontends/marketing/'
},plugins: [
new ModuleFederationPlugin({
name: 'marketing',filename: 'remoteEntry.js',exposes: {
'./MarketingModule': './src/bootstrap'
},shared: packageJson.dependencies
})
]
}
module.exports = merge(commonConfig,prodConfig)
我的 webpack 与 babel 的共同点:
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
module: {
rules: [
{
test: /\.m?js$/,exclude: /node_modules/,use: {
loader: 'babel-loader',options: {
presets: ['@babel/preset-react','@babel/preset-env'],plugins: ['@babel/plugin-transform-runtime']
}
}
}
]
},plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
}
我的带有 React-Router 的 App.js 组件:
export default function App({ history }) {
return (
<Fragment>
<StylesProvider generateClassName={generateClassName}>
<Router history={history}>
<Switch>
<Route exact path="/Microfrontends/marketing/pricing" component={Pricing} />
<Route path="/Microfrontends/marketing/" component={Landing} />
</Switch>
</Router>
</StylesProvider>
</Fragment>
)
}
当我在服务器中部署时,所有状态请求都是 200 并且 chrome 控制台没有错误
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。