[DX] PR Change the way that compiling looks like

[CosmeValera]

I added the configuration changes to improve the way that the compiling looks for webpack and rspack.

📷 RSPACK

• Before:

• After:

Feel free to try the changes, and let me know if you need anything else, or if there is something that you don't like 💓💓

(This PR is linked to https://github.com/jherr/create-mf-app/issues/68)

Additional thing

I also added this line inside module.exports.devServer:

watchFiles: [path.resolve(__dirname, 'src')],

`

It solves a bug/issue regarding remote mfes not having HMR. I found I problem where using your create-mf-app library for creating a host and a remote app. Then changes in the remote or the host will have HMR (Hot Module Replacemente) in the host, but not in the remote. Like in this image: You can use the code of this mini sample to try to check it if you want: https://github.com/CosmeValera/ReactProjects/tree/master/micro-fes/micro-fe-basic-sample-of-host-and-remote-linked or if you want we can talk about it somewhere else, in another PR/Issue, but yes, basically that line fixes this problem of the remote not having HMR. I found this code snippet researching for having hmr with webpack, however it seems that it makes the program slightly slower, not that I notice it at all, but maybe it could cause problem in some scenario.

[CosmeValera]

UPDATE: MOVED TO https://github.com/jherr/create-mf-app/issues/70

---

⚠️ Not related ISSUES ⚠️

I also found 2 things.

• react-esm does not have rspack config file. So for what I understand whenever you pick react-esm and rspack it picks webpack anyway. I don't know if this behaviour is intended in the sense that rspack is not compatible with react-esm, but if it was an oversight, I feel that the rspack file for react-sm must be very similar as the one for react.
• When executing any script in a rspack repo, an error regarding not understanding 'NODE_ENV' would arise in my terminal, maybe i did something wrong, I don't know anything about rspack :_(, I just did npm i && npm start.

I'm happy about you giving me more feedback, I'm open to keep helping the repo with what I can 💓💓

[jherr]

Let's see if we can pull in @ScriptedAlchemy to give us some additional insights into rspack behaviors.

[CosmeValera]

In my case what I did to try the rspack versions was to remove the NODE_ENV part in the scripts in the package.json.

In this case I consider that the goal of the PR is fully addressed with the code given. What I added in the comment starting with ⚠️ Not related ISSUES ⚠️ was matters for other issues/PRs. You can already test out the webpack and rspack apps 😊👍

[CosmeValera]

Let's see if we can pull in @ScriptedAlchemy to give us some additional insights into rspack behaviors.

It was my fault for being messy and talking about rspack here. But I would prefer to touch the rspack issues in another place, and maintain this PR just for the compiling idea. I created this issue for the rspack problem that I mentioned: https://github.com/jherr/create-mf-app/issues/70

[CosmeValera]

🧠 What changed:

In these last commits I extracted the method printCompilationMessage to another file which I have added in templates/compiler/compilation.config.ts. And in src/index.ts I added the code to have a dynamic import of the compilation.config.js file:

const copyCompilationConfig = (projectName: string) => {
  const sourcePath = path.join(__dirname, '../templates/compiler/compilation.config.js')
  const destinationPath = path.join(projectName, 'compilation.config.js')

  fs.copyFileSync(sourcePath, destinationPath)
}

📷 Folder structure

1. create-mf-app project

templates/compiler/compilation.config.ts

2. host project

compilation.config.js

[Chemaclass]

ping