[Bugs/Feedback] webpack 5 integration feedback

[nathanlesage]

Preflight Checklist

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project follows, as appropriate.
• I have searched the issue tracker for a bug that matches the one I want to file, without success.

Issue Details

• Electron Forge Version:
  • 6.0.0-beta.57
• Electron Version:
  • 12.0.9
• Operating System:
  • macOS 11.3 Big Sur (ARM64 architecture)
• Last Known Working Electron Forge version::
  • 6.0.0-beta.55

Expected Behavior

"Expected behaviour" is not that applicable, since it's a brand new version. I wanted to use this issue to address some issues and provide feedback with the Webpack 5 migration.

This morning, I migrated the whole https://github.com/Zettlr/Zettlr repository to Electron Forge using Webpack 5 plus all of the additional plugins we use and which were quite piling up in recent weeks.

After a few hours of fiddling with the configuration, I can report a success! The app starts both in development mode and can be packaged without errors.

However, I noticed a few things, which might not even be bugs, but I feel these are important nevertheless. To quote: "I did some smoketests and it seems fine, I guess I'll find out how many new issues folks create 😬"

So here we go :D

Webpack property devtool default not playing nice with content-security-policy

The new implementation of the devtool-property in the webpack config doesn't work with the following HTML tag: <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'"> since that prevents execution from eval that is being run somewhere in the defaults of webpack.

Solution: Manually set devtool: 'source-map' for the renderer process

Target: web not working for renderer processes with nodeIntegration: true

While it's certainly debatable whether or not to have nodeIntegration active in the renderer processes, I can't fully swap Zettlr over to the new sandboxed models in an instance. The newly added target: ['web', 'electron-renderer'] throws errors because webpack won't leave require()s alone (this includes the index.js from the electron-package, which is being called whenever some node module is being required). The only way I have found to solve it is to overwrite the target of the renderer

Solution: Manually set target: 'electron-renderer' for the renderer process

Renderer windows being opened in the system's browser

Further, I noticed that after changes to the renderer process, webpack's HMR seems to work differently. As soon as it notices a config change, the HMR attempts to fully reload the page, but instead of reloading it attempts to overwrite the navigation of the renderer. The problem is that my app blocks any attempt at redirecting the renderer windows for security purposes and instead opens those links in the system's browser. This unfortunately includes the webpack dev server.

Is this just how it's supposed to work now, or can we restore the old behaviour? Or is there a possibility to just prevent webpack from opening those URLs anyway …?

Sudden output of renderer compilation status

After the update, additionally, the info that some renderer code is being compiled is updated more often than before. Before, as soon as the Electron process was started, my own logs would take over and write to console, but after the update, I occasionally see the loading spinner interfere with this. Is there a way to suppress that …? (This is really not a big thing, I thought I'd drop that in while I'm at it anyway)

---

Also: The main process worked out of the box with no changes necessary.

Thank you so much for updating to Webpack 5!

EDIT: This update also reduced the size of the app by a whopping 20MB, so there is definitely some fine optimisation happening!

[malept]

I'm going to lock this post for now just because I do not want to encourage folks to write omnibus issues like this. I appreciate the feedback but it makes it quite difficult to close this normally. When I have more time I'm going to split this up into separate, actionable issues.

[malept]

Target: web not working for renderer processes with nodeIntegration: true

See #2293

[malept]

Webpack property devtool default not playing nice with content-security-policy

See #2331

[malept]

For the remaining points:

Sudden output of renderer compilation status

I think basically we'd have to figure out how to make the Webpack output and ora play nicely together, but to be frank, this is pretty low priority for me, unless I get more time via sponsorship.

Renderer windows being opened in the system's browser

This probably needs its own bug, but it also needs a minimal testcase.