refactor: use forge.config.ts in the webpack typescript template

[MarshallOfSound]

This also contains a bit of refactoring to avoid adding circular deps

[nickyvanurk]

Your forge.config.ts references js files, not ts. Is this a bug? Also the config file had to be .js in my case.

[erickzhao]

@nickyvanurk

Your forge.config.ts references js files, not ts. Is this a bug?

I think that's a bug from #2991, my bad.

Also the config file had to be .js in my case.

For forge.config.ts, I just tested myself and it seems like the latest release won't auto-detect the file in your root folder.

An unhandled rejection has occurred inside Forge:
Error: Unable to use specified module loaders for ".ts".

Electron Forge was terminated. Location:
{}
error Command failed with exit code 1.

but adding ./forge.config.ts to your package.json should work:

"config": {
    "forge": "./forge.config.ts"
  },

[nickyvanurk]

@erickzhao @MarshallOfSound Is there a reason for the config file to have the Typescript extension except that "it feels good"? So far in my development I have yet to see a typescript config file. It's either json or js/csj. To be it seems more trouble than it's worth trying to change this convention (by telling people to put an extra config line in their package.json).

[MarshallOfSound]

@nickyvanurk It makes the config type safe (which IMO is enough of a reason). It also as a side effect adds auto-complete and stuff for the config which makes the devxp of writing configs better. Note we're only making this the default for the typescript template, the non-typescript template will continue to be forge.config.js

[jahmezz]

After making this change, is there still a straightforward way to configure forge's plugins using package.json?
Or should I simply always configure everything using forge.config.ts?

I am looking for a way to recreate this approach people typically take. I haven't found a way to transpile the .ts files in a way that works.

{
"name": "@electron-forge/plugin-webpack",
"config": {
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [{
"name": "main_window",
"html": "./src/renderer/index.html",
"js": "./src/renderer/index.js",
"preload": {
"js": "./src/preload.js"
}
}]
}
}
}