如何在 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 中的任何其他執行之前加載腳本。

您必須在創建瀏覽器窗口時提供預加載腳本文件路徑，並且腳本的文件路徑應該是絕對路徑。

你可以在這里找到參考