webpack-electron-plugin v1.1.1
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
4 years ago