VueJS、Electron 和 Webpack 的问题（热重载）答案

【问题标题】：Issues with VueJS, Electron, and Webpack (Hot Reload)VueJS、Electron 和 Webpack 的问题（热重载）
【发布时间】：2017-09-24 21:13:31
【问题描述】：

我一直在从事一个涉及 Electron、VueJS 的新项目，并且我正在使用 Webpack 来实现 HMR 功能......我的问题是热模块替换的东西由于某种原因无法正常工作。

我有以下配置：

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（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（电子初始化等）

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`);
  }
});

我不确定我做错了什么。如果我在index.html 中使用http://localhost:8080/dist/build.js，则该应用程序可以在Electron 中运行，但是没有热重载功能（需要刷新页面）...但是如果我使用http://localhost:8080/webpack-dev-server.js（我认为这是我应该使用的） )，加载时我在应用中没有任何内容，只是一个空白窗口。

当我运行 webpack 开发服务器 (webpack-dev-server --hot --inline) 时，我在 JS 控制台中得到以下输出，但应用程序没有加载（在浏览器中测试：

[WDS] Hot Module Replacement enabled.

看起来 HMR 确实在工作，但应用程序的其余部分无法加载。不过，如果我前往http://localhost:8080/loading.html，那将按预期工作。我只能假设我没有在index.html 中引用带有<script> 标签的正确文件。

任何帮助将不胜感激。我唯一能想到的可能是它不喜欢电子初始化中loadURL() 的file:// 路径。提前致谢！

【问题讨论】：

标签： javascript webpack vue.js electron webpack-hmr

【解决方案1】：

我建议您使用electron-webpack，它提供了您所要求的功能。我已经用 VueJS 实现了 their boilerplate，你可以在这里查看 https://github.com/kontrollanten/electron-webpack-quick-start

【讨论】：