Solve the problem that the TS cannot be loaded when creating an app under typescript+webpack in electronic Forge

Version

electron: 18.2.0
electron-forge: 6.0.0-beta.63

Description

When using preload TS, the following code can be packaged normally but cannot be loaded into preload TS file.

// index.ts

declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
const mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      preload: MAIN_WINDOW_WEBPACK_ENTRY
    }
  })

//package.json

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

Solution

The root of the problem is package The preload path in JSON is used only during packaging
The packaged index JS code is as follows

Therefore, it cannot read preload normally

The solution is as follows

//Preload must be the absolute path, and it must be the path after packaging
 const mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      preload: "D:\\***\\electron-app\\.webpack\\renderer\\main_window\\preload.js"
    }
  });
// package. JSON invariant