I have been immersed in a new project that involves utilizing Electron, VueJS, and Webpack for HMR functionality. Unfortunately, I am encountering difficulties with the Hot Module Replacement feature not working as expected.
Here is my current configuration:
Webpack Configuration (webpack.config.js)
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'build.js',
},
resolve: {
alias: {
'vue': 'vue/dist/vue.common.js',
},
},
module: {
rules: [
{
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'],
},
}),
],
};
HTML File for Vue Mounting Point (index.html)
<!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>
JavaScript File for Electron Initialization (index.js)
const electron = require('electron');
const { app, BrowserWindow } = electron;
let mainWindow;
app.on('ready', () => {
let mainWindow = null;
const loadingWindow = new BrowserWindow({
width: 325,
height: 425,
frame: false,
show: false,
});
...
The issue arises when trying to implement Hot Module Replacement. When using
http://localhost:8080/dist/build.jsindex.html, the app runs in Electron without HMR. However, if I switch to http://localhost:8080/webpack-dev-server.jsEven though the console outputs indicate that HMR is enabled, the app does not fully initialize. Interestingly, accessing
http://localhost:8080/loading.html<script> reference in index.html.
I suspect the problem may be related to the file:// path used in the Electron initialization section of the code. Any insights or solutions would be highly appreciated. Thank you in advance!