I've been working on a new project involving Electron, VueJS, and I'm using Webpack for HMR functionality... My issue is that the Hot Module Replacement stuff isn't working for some reason.
I've got the following configuration:
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, './dist'),
// publicPath: '/dist/',
filename: 'build.js',
},
resolve: {
alias: {
'vue': 'vue/dist/vue.common.js',
},
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css/,
loader: 'style-loader!css-loader',
},
],
},
plugins: [
new webpack.ExternalsPlugin('commonjs', [
'electron',
]),
new webpack.HotModuleReplacementPlugin(),
new webpack.LoaderOptionsPlugin({
babel: {
'presets': ['env'],
'plugins': ['transform-runtime'],
},
}),
],
};
index.html (Mount point for Vue)
<!DOCTYPE html>
<html>
<head>
<title>Hermes - Empyrion Environment Editor!</title>
<style>
body {
background-color: #222222;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
</body>
</html>
index.js (Electron initialization, etc.)
const electron = require('electron');
const { app, BrowserWindow } = electron;
// Main Window Handle
let mainWindow;
app.on('ready', () => {
let mainWindow = null;
const loadingWindow = new BrowserWindow({
width: 325,
height: 425,
frame: false,
show: false,
});
loadingWindow.once('show', () => {
mainWindow = new BrowserWindow({
width: 1024,
height: 768,
minWidth: 1024,
minHeight: 768,
show: false,
});
mainWindow.webContents.once('dom-ready', () => {
mainWindow.show();
loadingWindow.hide();
loadingWindow.close();
});
mainWindow.loadURL(`file://${__dirname}/index.html`);
mainWindow.on('closed', () => {
mainWindow = null;
});
});
loadingWindow.loadURL(`file://${__dirname}/loading.html`);
loadingWindow.show();
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
mainWindow = new BrowserWindow({
width: 1024,
height: 768,
minWidth: 1024,
minHeight: 768,
show: true,
});
mainWindow.webContents.once('dom-ready', () => {
mainWindow.show();
});
mainWindow.loadURL(`file://${__dirname}/index.html`);
}
});
I'm not sure what I'm doing wrong. If I use http://localhost:8080/dist/build.js in index.html, the app works in Electron, but there's no Hot Reload functionality (requires a page refresh)...but if I use http://localhost:8080/webpack-dev-server.js (I thought this is what I was supposed to use), I get no content in the app when it loads, just a blank window.
When I run the webpack dev server (webpack-dev-server --hot --inline), I get the following output in the JS console, but the app doesn't load up (testing in a browser:
[WDS] Hot Module Replacement enabled.
It's acting as if HMR is indeed working, but the rest of the app fails to load. If I head to http://localhost:8080/loading.html though, that works as expected. I can only assume I'm not referencing the correct file with the <script> tag in index.html.
Any assistance would be greatly appreciated. The only thing I can think of is that maybe it's not liking the file:// path for loadURL() in the Electron initialization. Thanks in advance!
