Ich habe an einem neuen Projekt mit Electron, VueJS gearbeitet, und ich benutze Webpack für HMR-Funktionalität ... Mein Problem ist, dass das Hot Module Replacement Zeug funktioniert aus irgendeinem Grund nicht.Probleme mit VueJS, Electron und Webpack (Hot Reload)
Ich habe die folgende Konfiguration bekam:
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 (Mountpunkt für 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 Initialisierung usw.)
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`);
}
});
Ich bin mir nicht sicher, was ich falsch mache. Wenn ich http://localhost:8080/dist/build.js in index.html benutze, funktioniert die App in Electron, aber es gibt keine Hot Reload Funktionalität (erfordert eine Seitenaktualisierung) ... aber wenn ich http://localhost:8080/webpack-dev-server.js benutze (ich dachte, das ist was ich verwenden sollte), bekomme ich keinen Inhalt in der App, wenn es geladen wird, nur ein leeres Fenster.
Wenn ich laufen die webpack Dev-Server (webpack-dev-server --hot --inline), habe ich die folgende Ausgabe in der JS-Konsole zu erhalten, aber die App laden nicht (Tests in einem Browser:
[WDS] Hot Module Replacement enabled.
Es benimmt sich, als ob HMR ist in der Tat funktioniert, aber der Rest der App geladen werden kann. Wenn ich aber zu http://localhost:8080/loading.html Kopf, die wie erwartet funktioniert. ich kann nur annehmen ich bin nicht die richtige Datei mit dem <script> Tag in index.html verweisen.
Jede Hilfe würde sehr geschätzt werden, das einzige, was mir einfällt, ist das Es ist nicht der file:// Weg für loadURL() in der Electron-Initialisierung. Danke im Voraus!