webpack-reaload-electron v1.1.2

Electron-Plugin for Webpack VIP

This is a simple plugin, that reloads app content and restarts app when needed. It is intended to work with webpack-dev-server, but will also work with webpack.

This plugin is still work in progress. It is not yet available on npm, so in order to make it work, clone this repository and build it:

// clone repository
git clone https://github.com/Marcin-Rogalski/webpack-electron-plugin.git

// enter newly created folder
cd webpack-electron-plugin

// install dependecies
npm install

// build package
npm build:prod

Then install it using path to built package from yor project's directory:

npm install --save-dev ./../webpack-electron-plugin

Installation

Simply use package manager of your choosing to download and install this package like this:

// npm

npm install --save-dev webpack-electron-plugin

Usage

Basics usage

To use this plugin simply import it into your webpack.config.js file, create an instance and add it to your config:

// webpack.config.js

const{ resolve } = require('path')

// import constructor and create an instance
const { WebpackElectronPlugin } = require('webpac-electron-plugin')
const plugin = new WebpackElectronPlugin()

module.exports = {
	target: 'electron-main',
	mode: 'development',
	entry: './src/main.js'
	output: {
		filename: 'main.js',
		path: resolve( __dirname, 'dist' )
	},
	plugins: [

		// add plugin to your configuration
		plugin
	]
}

Now each time you run your compilation with:

// package.json

...
scripts:{
	"build": "webpack"
}
...

app will aoutomaticly start.

Little more advanced usage

To use power of webpack-dev-server instead of this:

// main.js

window.loadFile( 'index.html' )

add this to your main file when loading your index.html file:

// main.js

const path = require('path')

let file = 'index.html'

// note that file named 'index.html' can be ommited in loadUrl method, other names must be added explicitly

if( process.env.REMOTE ){
	window.loadUrl( path.join( process.env.URL + file ) )
} else window.loadFile( file )

// or using trenary operator
process.env.REMOTE 
	? window.loadUrl( path.join( process.env.URL + file ) )
	: windwo.loadFile( file )

and change package.json to look like this:

// package.json

...
scripts:{
	"build": "webpack-dev-server"
}
...

This will let plugin reload window content whenever compilation occures. Plugin also automaticy restarts your app when main file compiles.

Advanced usage

To custimize some of the options you can pass options object to constructor like this:

const electronPlugin = new WebpackElectronPlugin({

	// this option is same as devServer's host option but has higher priority
	host?: string
	
	// this option is same as devServer's port option but has higher priority
	port?: number

	// this options lets you turn off spawning windows when copiling for production
	useInProduction?: boolean | default: false

	// this option forces all windows to be closed when compiling
	forceRestart?: boolean | default: false,

	// tell plugin to reopen closed windows on compilation
	reopen?: boolean | default: false,
	
	// let's you controle your apps main process stdout and stderr
	output?: 'none' | 'error' | 'normal'
	
	// let's you controle your plugin's chatness
	logging?: 'none' | 'error' | 'normal'
})

Things You should know

• If You wish to set up dev server by plugin options, add this to first of your configs:

{
	...

	devServer: {}	// without this, plugin wont be able to set webpack-dev-server options
}

• To use this plugin with success You need to set up proper targets for each config exported to webpack/webpack-dev-server. While compiling electron's main file, set 'electron-main' as target, for renderer process set 'electron-renderer'. Plugin matches this values to detect wether to reload or restart your apps.
• Webpack-dev-server uses only configuration supplied with first config if many configs are exported, keep that in mind.
• While using webpack-dev-server, by default, compilation will be served to localhost, wich means that no files will be emited. Thats not a problem, plugin will load remote files including main files for your app. \
• For now this plugin doesn't support https whie using webpack-dev-server. Use http instead.
• This is still a work in progress and may not work in all cases, feel free to give me feedback

Externals

This plugin uses:

• colors - get color and style in your node.js console
• tree-kill - kill all processes in the process tree, including the root process

Author

Marcin Rogalski - mail me