How to detect which compiling option are used on recompilation by webpack - node.js

Question

I have the following script
const WebpackDevServer = require('webpack-dev-server')
const webpack = require('webpack')
const electroner = require('electroner')
const packageJson = require('../package')
const config = require('./webpack.config')
const options = {
port: 3000,
contentBase: './dist',
hot: true,
overlay: true,
after: function (app, server) {
const window = electroner(`${__dirname}/../${packageJson.main}`, {
'enable-transparent-visuals': true,
'disable-cpu': true
})
window.on('close', () => {
server.close()
})
},
stats: 'errors-only'
}
WebpackDevServer.addDevServerEntrypoints(config, options)
const compiler = webpack(config)
const server = new WebpackDevServer(compiler, options)
server.listen(3000, 'localhost', () => {
console.log('dev server listening on port 3000')
})
The "config" variable contains/points to two webpack configuration (one for main and another for renderer script for an electron app).
What I'd like to achieve is, I want to restart the electron process only when the recompilation of the main script is successful.
I've read for a week about hooks but I believe they do not help in achieving the above.
I am looking for a solution that goes along like this:
compiler.on('compile', (stats) => {
if(stats.details === 'main.js'){
// logic to restart electron process here.
}
})
Any hints would be appreciated.

Answer 1

Achieved the behavior I was looking for with the below
const webpackDevServer = require('webpack-dev-server')
const webpack = require('webpack')
const electroner = require('electroner')
const path = require('path')
const packageJson = require('./package')
const config = require('./webpack.config')
let window
let server
const options = {
contentBase: './dist',
hot: true,
host: 'localhost',
after: function (app, server) {
window = electroner(path.resolve(__dirname, packageJson.main), {
'enable-transparent-visuals': true,
'disable-cpu': true
})
window.on('close', () => {
server.close()
})
},
port: 3000,
overlay: true,
stats: 'errors-only',
writeToDisk: true
}
let done = false
function initCompiler () {
done = false
webpackDevServer.addDevServerEntrypoints(config, options)
const compiler = webpack(config, (error, stats) => {
if (error) {
console.error(error.stack || error)
if (error.details) {
console.error(error.details)
}
return
}
const info = stats.toJson()
if (stats.hasErrors()) {
console.error(info.errors)
}
if (stats.hasWarnings()) {
console.warn(info.warnings)
}
done = true
})
let check
let start = () => {
if (!done) {
check = setTimeout(start, 100)
return
}
server = new webpackDevServer(compiler, options)
server.listen(3000, 'localhost', () => {
console.log('dev server listening on port 3000')
})
}
setTimeout(start, 100)
let files = []
compiler.hooks.watchRun.tap('MainProcess', compiler => {
files = Object.keys(compiler.watchFileSystem.watcher.mtimes).map(file => {
return path.parse(file).dir
})
})
compiler.hooks.done.tap('MainProcess', () => {
const search = path.resolve(__dirname, 'src', 'main')
if (files.length && files.filter(file => file.indexOf(search) > -1).length) {
files = []
window.kill()
server.close()
initCompiler()
}
})
}
initCompiler()
Edit
My previous answer had some issues. On compile, if the main.js file wasn't already present, it would error and stop the compilation and not start the app.
The edit ensures that the compile is first completed before starting the server and then start the electron app.