如何让webpack在使用electron-forge启动开发服务器时也加载preload.js

piv4azn7  于 2022-12-08  发布在  Electron
关注(0)|答案(2)|浏览(388)

问题

对于我的使用npx create-electron-app <appname> --template=typescript-webpack创建的电子应用程序,用户需要能够在单击按钮时打开一个新的BrowserWindow示例(而不是您使用window.open()创建的示例)。
由于打开新窗口的主动权来自应用的前端/渲染器,因此我必须使用ipcRenderer向主进程发送消息,然后我可以在主进程中侦听消息,以便打开新的BrowserWindow。
然而,我没有告诉webpack在通过yarn electron-forge start启动应用程序时,也要捆绑所需的preload.js沿着index.js。.webpack文件夹结构应该如下所示:

main
  index.js (main)
  preload.js
renderer
  main_window
    index.html
    index.js (renderer)
  ...

但缺少preload.js,这会导致控制台中出现错误,并且按钮无法正常工作。

启动devserver后,当我手动将preload.js复制到正确的位置(.webpack/main)时,一切都正常,这很好,但这不是一个解决方案。
安装程序
原始的index.ts和preload.js在src文件夹中彼此相邻
我是一个完全的新手,当谈到webpack或其他类似的服务,所以我不知道什么是错的,在我的自动生成的webpack配置。

webpack.主配置文件.js

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: require("./webpack.rules"),
  },
  resolve: {
    extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".json"],
  },
};

webpack.渲染器.配置.js

const rules = require("./webpack.rules");
const plugins = require("./webpack.plugins");

rules.push({
  test: /\.css$/,
  use: [
    { loader: "style-loader" },
    { loader: "css-loader" },
    { loader: "postcss-loader" },
  ],
});

module.exports = {
  module: {
    rules,
  },
  plugins: plugins,
  resolve: {
    extensions: [".js", ".ts", ".jsx", ".tsx", ".css"],
  },
};

网页包.插件.js

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = [new ForkTsCheckerWebpackPlugin()];

网络包.规则.js

module.exports = [
  {
    test: /native_modules\/.+\.node$/,
    use: 'node-loader',
  },
  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@vercel/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
  {
    test: /\.tsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'ts-loader',
      options: {
        transpileOnly: true,
      },
    },
  },
];

如果需要的话,我可以提供index.ts和preload.js的源代码,以及从渲染器进程调用方法的文件。我非常确定,尽管它们不是问题所在,因为当我在启动后手动将preload.js注入.webpack/main时,一切都正常。

camsedfj

camsedfj1#

你可以使用webpack和electron forge提供的magic全局变量,在magic全局变量中可以阅读更多的内容
希望下面代码对您有所帮助:
用于创建浏览器窗口
preload : MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY属性将有助于捆绑preload.js,以便与其他呈现脚本const mainWindow = new BrowserWindow({ width: 1000, height: 900, webPreferences:{ preload : MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, } });一起打包
用于加载应用程序的index.html。

mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
vmdwslir

vmdwslir2#

为了便于将来参考,总的来说,您可能需要做两件事才能让预加载脚本正常工作:
1.在index.ts文件中使用全局变量,就像Anirudh建议的那样:

// stuff...

// specifically for typescript: 
// the first declare should have been automatically generated
declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string; // add this

// other stuff...

const createWindow = (): void => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, // change this
    },
  });
  // and all the other things in index.ts.
}

1.之后,你可能还需要修改你的package.json,就像Clemens建议的那样。这需要更多的研究,但是webpack插件的文档可以在here中找到,其中所有的变量都可以通过config > forge > plugins的package.json条目来操作。因此,关键部分应该看起来像这样:

[
          "@electron-forge/plugin-webpack",
          {
            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./src/index.html",
                  "js": "./src/renderer.ts",
                  "name": "main_window",

                  // -------------- change starts here --------------
                  "preload": {
                    "js": "./src/preload.ts" // or wherever your preload script is written
                  }
                  // --------------  change ends here  --------------
                }
              ]
            }
          }
        ]

我也是javascript的初学者,所以我不完全确定它是否正确。希望它能有所帮助!

相关问题