Open 498755303 opened 1 year ago
To use splitchunk and module federation you can follow the following steps .
// webpack.config.js in host application const { ModuleFederationPlugin } = require('webpack').container;
module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'hostApp', remotes: { remoteApp: 'remoteApp@http://remote-app-url/remoteEntry.js', // URL to the remote application }, shared: { // Specify the dependencies you want to share react: { singleton: true }, 'react-dom': { singleton: true }, // Add other shared dependencies here... }, }), ], };
// webpack.config.js in remote application const { ModuleFederationPlugin } = require('webpack').container;
module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'remoteApp', filename: 'remoteEntry.js', exposes: { './SomeComponent': './src/SomeComponent', // Expose components you want to share }, shared: { react: { singleton: true }, 'react-dom': { singleton: true }, // Add other shared dependencies here... }, }), ], };
// webpack.config.js in both host and remote applications module.exports = { // ... optimization: { splitChunks: { chunks: 'all', minSize: 0, cacheGroups: { default: false, vendors: false, // Create a custom cache group for shared chunks shared: { name: 'shared', test: /[\/]node_modules[\/]/, priority: -10, chunks: 'all', }, }, }, }, // ... };
This fix does not work for me. Still complaining about loading the script file
same issue
home\src\components\HelloWorld.vue
app\src\App.vue
app\src\main.js
app\src\bootstrap.js
you should correcting these problems first.
It seems there is a conflict between
splitChunks
andwebpack module federation
(I am not an expert). After deletingsplitChunks
config,module federation
workshome\vue.config.js
Originally posted by @fangbinwei in https://github.com/vuejs/vue-cli/issues/6318#issuecomment-786603459
How to use splitchunk and module federation at the same time