既然已经有了一个公认的答案，我就告诉你我是如何为可能遇到同样问题的人解决这个问题的。
目前，有一种方法可以通过使用protocol来完成此操作，即使您指定

webPreferences: {
  webSecurity: true,
}

通常要显示图像或播放文件中的视频，您会执行以下操作

<video controls autoplay>
  <source src="file:///path-to-video.mp4">
</video>

但这对webpack不起作用，因为webpack会生成一个服务器，默认情况下，基于安全原因，以file://开头的所有内容都不会被加载。如果电子版是用file://index.html加载的，那么它可能会起作用，但protocol的方式非常酷，你可以保护你的资源。
要克服您的问题，您可以采取以下措施：

const { protocol } = require('electron');

function fileHandler(req, callback){
  let requestedPath = req.url
  // Write some code to resolve path, calculate absolute path etc
  let check = // Write some code here to check if you should return the file to renderer process

  if (!check){
    callback({
      // -6 is FILE_NOT_FOUND
      // https://source.chromium.org/chromium/chromium/src/+/master:net/base/net_error_list.h
      error: -6 
    });
    return;
  }

  callback({
    path: requestedPath
  });
}

// Then in electron main.js

app.on("ready", () => {
  
  protocol.registerFileProtocol(
    'your-custom-protocol',
    fileHandler,
  );

  // Create some window you can even use webPreferences: true
});

然后，您可以在HTML代码中使用它，如下所示

<video controls autoplay>
  <source src="your-custom-protocol:///path-to-video.mp4">
</video>

通过这样做，你可以确保你的应用程序是安全的，它不是从文件系统中请求随机文件，它也与webpack一起工作得很好。
关于这方面的更多信息，有一个github repo来展示电子安全模式。

我最近遇到了同样的问题。你可以设置（在主进程中）：

webPreferences: {
  webSecurity: false
}

这将允许你从用户的硬盘加载file://的网址。然而，这是一个非常糟糕的做法，因为它打开了安全。
公认的办法是：

webPreferences: {
  webSecurity: true
}

然后，从主进程创建一个Web服务器来提供所需的文件。
在您的主进程中：

const http = require('http')
const express = require('express')
const expressApp = express()
const cors = require('cors')
const router = express.Router()

然后执行下列程式码：

expressApp.use(cors())

router.get('/file/:name', function (req, res) {
  let filename = req.params.name
  res.sendFile(filename)
})

expressApp.use('/', router)

http.createServer(expressApp).listen(8000)

现在，在呈现器代码的js/html中，可以将video标记中的src设置为：

'http://localhost:8000/file/' + filename

尽管我不喜欢鼓励这样做，但我还是建议您在BrowserWindow中禁用Web安全首选项，以解决问题。此外，还有一个与此主题相关的issue。