Question

我一直致力于一个涉及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`);
  }
});

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

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

[WDS] Hot Module Replacement enabled.

它表现得好像HMR确实在工作，但应用程序的其余部分无法加载。如果我前往http://localhost:8080/loading.html，那会按预期工作。我只能假设我没有使用<script>中的index.html标记引用正确的文件。

非常感谢任何帮助。我唯一能想到的是，它可能不喜欢电子初始化中file://的{{1}}路径。提前谢谢！

Answer 1

我建议您使用electron-webpack，它提供您要求的功能。我已将their boilerplate与VueJS的实施分开，您可以在此处查看https://github.com/kontrollanten/electron-webpack-quick-start

VueJS，Electron和Webpack的问题（Hot Reload）

1 个答案: