如何在 Electron 中使用 webpack 编译预加载脚本？

Question

电子 1.6.5，Webpack 2.4.1

我正在使用带有webview组件的电子反应样板。 我将一个预加载脚本注入到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因为它没有通过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不足错误，这让我相信这是不正确的。

另外：这种方法不会在./dist文件夹中复制electron ，因为它是由preload.js和index.js共同./dist的require()吗？

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，导致意外的行为在几乎所有情况（见这里了解更多信息，应该是默认的假的，但不适合我） .

Answer 2

我们有一个类似的问题，我们有几个预加载脚本而不是一个。 我们的解决方案是使用CopyPlugin 。 所以对我们来说，配置是这样的：

const CopyPlugin = require("copy-webpack-plugin");

plugins.push(new CopyPlugin([{ from: "src/container-with-scripts/", to: "preloadScripts/" }]));

module.exports = {
  module: { rules }, // imported from elsewhere
  target: "electron-renderer",
  node: { global: true },
  plugins,
  resolve: {
    extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".scss"]
  }
};

因此，我们只需将包含所有脚本的文件夹复制到自动生成的 .webpack 文件夹中。

Answer 3

我遇到了同样的问题，这里的解决方案对我有用：
Electron-webpack 文档现在包含如何添加额外条目的示例。

"electronWebpack": {
  "main": {
    "extraEntries": ["@/preload.js"]
  }
}

请注意，您可以使用 @ 别名来引用您的 main.sourceDirectory
在这种情况下，它是主进程脚本的路径，默认情况下将是src/main

这会将来自src/main/preload.js预加载脚本添加到 webpack 条目中。
然后你需要将预加载脚本添加到窗口中

new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      preload: path.resolve(path.join(__dirname, "preload.js")),
    }
})

就这样。 __dirname给了我相对路径，而电子需要预加载脚本的绝对路径，所以它失败了。 path.resolve将为您提供使其工作所需的绝对路径。

Answer 4

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

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

你可以在这里找到参考