Electron Forge の Webpack テンプレートで Electron Preferences を使うと、設定画面が真っ白になる

状況を確認するため、debug: true にして DevTools を表示してみる。

const preferences = new ElectronPreferences({
  debug: true,
  :

この機能 v2.5.0 で追加されたもの。

https://github.com/tkambler/electron-preferences/releases/tag/v2.5.0

するとコンソールに app.js が読み込めていない旨のエラーが表示されている。Webpack が怪しい。Electron Preferences で使っている index.html は読み込めているのだが、その中の script タグで指定されている app.js までは Webpack が処理してくれなかった様子。

どう指定すればよいか迷ったが、下記の issue を発見。

https://github.com/tkambler/electron-preferences/issues/16#issuecomment-535149029

copy-webpack-plugin をインストールし

yarn add -D copy-webpack-plugin

webpack.main.config.js に下記を追加

module.exports = {
  module: {
    :
    plugins: [
      new CopyPlugin({
        patterns: [
          { from: 'node_modules/electron-preferences/build', to: 'native_modules' }
        ]
      }),
    ]

最新の copy-webpack-plugin だと patterns の中で指定する必要があったのと、出力先を native_modules に変更すると、./.webpack/main/native_modules 配下に出力され、無事動いた！