I maintain webpack, ask me anything!

I'm Sean,

I maintain webpack.

I work on Microsoft Edge DevTools.

I love 🐔s.

Ask.

Me.

Anything.

:-D

Comments

[Abhishek Sharma]

I have 3 spas and 1 asp.net MVC application. This is my page Loading flow process. Asp.net MVC (on the view page, we have section script where we have mentioned about importmap.json file, div id of portal container, systemJs, vue, vue-router, single spa) --> Portal MFE (Registering application, using importmap.json, system.import) --> productmangement SPA (single spa - Vite) sharedcatalogmanagement SPA ( single spa - vue cli)

Whenever we are searching this route (ecommerce/product/import) in browser then the portal mfe will call the spa's by using importmap.json file and integrate each spa with asp.net MVC application.

Challenge - I have added module federation on the existing flow. Where I have made productmangement Single SPA vite as remote and exposing two components (productmangement SPA is a mono repo) and then trying to consume it from sharedcatalogmanagement single spa vue cli then getting ScriptExternalLoadError ( missing: localhost:8080/microfront/productm...) I have tried many ways to fix this issue but not able to achieve. I have checked the remoteEntry.js file on the browser and able to see the content. I am not sure why it is coming as missing when I am trying to consume it from sharedcatalogmanagement single spa application.

Is it possible to have Single Spa and module federation on the same vue3 microfrontend application? Can anyone please help with any documentation or sample code?

Testing – I am opening the environment and then browsing to this page URL (ecommerce/product/import), then opening dev tools and adding the localhost URL on the dev tools and reloading the page. Then Single SPA is loading fine, but module federation is not working.

When I am building the product management spa mfe, then it's generating different files. I am using main.js for single SPA integration, and this file I will use on the dev tools to load the single SPA page. Another file, remoteEntry.js, will be used for module federation.

Kindly help me on this.

Vue cli, vite, vuejs3, single spa, module federation

[Abhishek Sharma]

I have 3 spas and 1 asp.net MVC application. This is my page Loading flow process. Asp.net MVC (on the view page, we have section script where we have mentioned about importmap.json file, div id of portal container, systemJs, vue, vue-router, single spa) --> Portal MFE (Registering application, using importmap.json, system.import) --> productmangement SPA (single spa - Vite) sharedcatalogmanagement SPA ( single spa - vue cli)

Whenever we are searching this route (ecommerce/product/import) in browser then the portal mfe will call the spa's by using importmap.json file and integrate each spa with asp.net MVC application.

Challenge - I have added module federation on the existing flow. Where I have made productmangement Single SPA vite as remote and exposing two components (productmangement SPA is a mono repo) and then trying to consume it from sharedcatalogmanagement single spa vue cli then getting ScriptExternalLoadError ( missing: localhost:8080/microfront/productm...) I have tried many ways to fix this issue but not able to achieve. I have checked the remoteEntry.js file on the browser and able to see the content. I am not sure why it is coming as missing when I am trying to consume it from sharedcatalogmanagement single spa application.

Is it possible to have Single Spa and module federation on the same vue3 microfrontend application? Can anyone please help with any documentation or sample code?

Testing – I am opening the environment and then browsing to this page URL (ecommerce/product/import), then opening dev tools and adding the localhost URL on the dev tools and reloading the page. Then Single SPA is loading fine, but module federation is not working.

When I am building the product management spa mfe, then it's generating different files. I am using main.js for single SPA integration, and this file I will use on the dev tools to load the single SPA page. Another file, remoteEntry.js, will be used for module federation.

vue.jsvuejs3vitesingle-page-application

[Taylor Teal]

What do you think about using webpack for backend express apps? Is there a compelling reason to do this or not to?

[Binyamin Green]

Using and customizing webpack can be very confusing for beginners. Why do you think that is? What can we as a community do to help them?

[kirankumar]

when I add new plugin to webpack dev config file javascript heap out of memory error is getting?
what do I do?

[Zach Cervi]

How can you conditionally load two different sass styles from webpack? Is it possible? I am trying to perform AB testing with two different stylesheets.

Condition A {
Load style A}
Else {
Load style B
}

[AntonPilyak]

Hi Sean! I'm trying to write a plugin (or loader) for Webpack, but think that I'm stuck in trying to understand hooks and compilation stages. Could you please help me with this question: stackoverflow.com/questions/539367...
I would be extremely grateful!

[x-yuri]

Hey Sean, what exactly is Webpack's manifest? How can I see it? I'm trying to understand why I should move runtime into a separate chunk (optimization.runtimeChunk = 'single'). And can't reproduce this case where content hash changes with each build, with no changes in the project files. webpack.js.org/guides/caching/#out...

[Lizzie Karr]

Hi Sean! Thanks for being open to questions <3

I'm trying to use an a tag to download a .rdp file. This works fine with an image but not with the file I need. Do you know if there's a webpack loader that can accept .rdp ?

Thank you!

<a :href='../assets/access.rdp' download>Remote Desktop</a>

[Sean Larkin]

There might be, but if there's not you could always write one and then open source it to webpack-contrib!!! webpack.js.org/API/loaders