electron-forge-plugin-rspack
v1.0.0
Published
Webpack plugin for Electron Forge
Downloads
5
Readme
electron-forge-plugin-rspack
Support rspack 1.0
Transform and bundle code for your Electron Forge app with rspack.
This project forked from plugin-webpack, document
It's electron-forge plugin.
Installation
npm install --save-dev electron-forge-plugin-rspack
Usage
Plugin configuration
You must provide two rspack configuration files: one for the main process in mainConfig, and one for the renderer process in renderer.config.The complete config options are available in the API docs under WebpackPluginConfig
For example, this is the configuration taken from electron-forge-rspack-template:
// forge.config.ts
import type { ForgeConfig } from "@electron-forge/shared-types";
import { RspackPlugin } from "electron-forge-plugin-rspack";
import { mainConfig } from "./rspack.main.config";
import { rendererConfig } from "./rspack.renderer.config";
const config: ForgeConfig = {
// ...
plugins: [
new RspackPlugin({
mainConfig,
renderer: {
config: rendererConfig,
entryPoints: [
{
html: "./index.html",
js: "./src/renderer.ts",
name: "main_window",
preload: {
js: "./src/preload.ts",
},
},
],
},
}),
],
// ...
};
export default config;
Project files
This plugin generates a separate entry for the main process, as well as each renderer process and preload script.
You need to do two things in your project files in order to make this plugin work.
package.json
First, your main entry in your package.json file needs to point at "./.rspack/main" like so:
// package.json
{
"name": "my-app",
"main": "./.rspack/main",
// ...
}
Main process code
Second, all loadURL and preload paths need to reference the magic global variables that this plugin will define for you.
Each entry point has two globals defined based on the name assigned to your entry point:
The renderer's entry point will be suffixed with _RSPACK_ENTRY
The renderer's preload script will be suffixed with _PRELOAD_RSPACK_ENTRY
In the case of the main_window entry point in the earlier example, the global variables will be named MAIN_WINDOW_RSPACK_ENTRY and MAIN_WINDOW_PRELOAD_RSPACK_ENTRY. An example of how to use them is given below:
const mainWindow = new BrowserWindow({
webPreferences: {
preload: MAIN_WINDOW_PRELOAD_RSPACK_ENTRY
}
});
mainWindow.loadURL(MAIN_WINDOW_RSPACK_ENTRY);
These variables are only defined in the main process. If you need to use one of these paths in a renderer (e.g. to pass a preload script to a tag), you can pass the magic variable value with a synchronous IPC round trip.
// main.js
// make sure this listener is set before your renderer.js code is called
ipcMain.on('get-preload-path', (e) => {
e.returnValue = WINDOW_PRELOAD_WEBPACK_ENTRY;
});
// prelaod.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
getPreloadPath: () => ipcRenderer.sendSync('get-preload-path')
});
// renderer.js
const preloadPath = window.electron.getPreloadPath();
Usage with Typescript
If you're using the rspack plugin with TypeScript, you will need to manually declare these magic variables to avoid compiler errors.
// main.ts
declare const MAIN_WINDOW_RSPACK_ENTRY: string;
declare const MAIN_WINDOW_PRELOAD_RSPACK_ENTRY: string;
Other
this plugin uses @rspack/dev-server to help you quickly iterate on renderer process code in development mode. Running electron-forge start with the rspack plugin active will launch a dev server that is configurable through the plugin config.
Example
git clone https://github.com/noshower/electron-forge-rspack-template
cd electron-forge-rspack-template
npm i
npm start