ModuleFederationPlugin と webpack を使用してマイクロフロントエンドに基づく反応 Web アプリケーションをデプロイしようとしていますが、マイクロフロントエンドの 1 つを分離してデプロイしようとすると、エラーのない白いページが表示されます。
本番環境への私の 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 コンソールにエラーが表示されません