Do you want just concentrate on development and do not think about process reloading and other under-the-hood stuff? Do you want just write code and immediately see a result?
Webpack is a solution. It is a little bit complicated to glue all pieces together, but do not worry — electron-webpack simplifies configuration a lot (in the same user-friendly and convenient way as electron-builder simplifies Electron application packaging and distribution). Currently, special project structure is required, but ability to customize and use for any project structure will be added by request.
With electron-webpack you can simply run yarn dev in the terminal and that’s all. Back to the IDE and write code.
Mostly all webpack loaders supports HMR (Hot Module Replacement) and in a renderer process hot module replacement in most cases will just work without any efforts.
But in a main process, you need to explicitly use Hot API — it is not intuitive on first glance, but in general quite convenient.
For example, if in the your main entry file (index.ts) of main process you configure IPC, on hot module replacement you need to reconfigure it:
if (module.hot != null) {
module.hot.accept("./ProjectInfoProducer", () => {
rxIpc.cleanUp()
configureIpc(storeManager)
})
}What does this code? If module ProjectInfoProducer or any it’s child modules changed, remove all current IPC listeners and establish IPC again. You can find this code in the Electrify app (search by module.hot). These several lines of code allows to develop Electron application without tedious restart.
Doesn’t matter how many and how complex are IPC listeners — no need to implement accept logic in each module, if module doesn’t handle hot replacement, Webpack invalidates it’s parent and so on up to the root.
What happens if you don’t implement accept or some error occurred or your main entry file is changed? electron-webpack takes care about it. In this case application will be restarted automatically.
HMR not only saves your time, but makes main process debugging comfortable in an IDE (IntelliJ IDEA, WebStorm and other JetBrains IDE fully support Electron applications debugging), because process is not restarted and, so, debug connection is not closed. Currently, debugging in an IDE is not seamless, but support and tutorials will be done soon.
Yes — Webpack HMR is an advanced level, but electron-webpack takes care about all things except Hot API in your application main process modules, so, it worth to spend several hours to set up (and in a renderer process it will work without any effors in most cases).
