如何在Electron中编译带webpack的预加载脚本？

Question

Electron 1.6.5,Webpack 2.4.1

我正在使用带有组件的电子反应样板webview.我注入了一个preload脚本webview,就像这样:

const { ipcRenderer } = require('electron');
const doSomething = require('./utils/do-some-thing.js');

document.addEventListener('DOMContentLoaded', event => {
   doSomeThing()

  // tell scraper to get started
  ipcRenderer.sendToHost('THING IS DONE', [{ url: document.URL }]);
});

webview需要将此脚本作为file://路径传递,如下所示:

       <webview
        preload={'./some/folder/preload.js''}
        {...props}
      />

问题是我的webpack设置没有转换,preload.js因为它没有明确调用via require().然后,当我构建应用程序时,路径./some/folder/不存在.

我已经尝试设置webpack来创建第二个编译脚本,如下所示:

entry: [
    'babel-polyfill',
    './app/index',
    './some/folder/preload.js'
  ],

  output: {
    path: path.join(__dirname, 'app/dist'),
    publicPath: '../dist/'
  },

但这会导致JavaScript heap out of memory错误,这让我相信这是不正确的.

另外:这个方法不会electron在./dist文件夹中重复,因为它是require()由两个preload.js和index.js？

Answer 1

你可以使用 webpack 的电子主和电子预加载配置：

const path = require('path');

module.exports = [
  {
    entry: './src/index.js',
    target: 'electron-main',
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'index.bundled.js'
    },
    node: {
        __dirname: false,
    }
  },
  {
    entry: './src/preload.js',
    target: 'electron-preload',
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'preload.bundled.js'
    }
  },
]

构建后你会得到两个包，但 Electron 不在其中，所以没有重复。

注意__dirname: false, 这是必需的，因为否则 webpack 替换__dirname总是由webpack 替换/，导致几乎所有情况下的意外行为（请参阅此处了解更多信息，默认情况下应为 false，但不适合我）。

Answer 2

Electron 提供了一个选项，可以在 DOM 中执行任何其他操作之前加载脚本。

您必须在创建浏览器窗口时提供预加载脚本文件路径，并且脚本的文件路径应该是绝对路径。

您可以在这里找到参考