使用静态资源

当使用 webpack 将所有资源打包在一起时，我们失去了提供资源完整路径的能力。 当我们需要使用像 fs 这样的模块或那些需要资源文件路径的模块时，这一点尤其重要。 electron-webpack 意识到了这个问题并提供了一个解决方案。

您可能已经在 项目结构 中注意到，有一个专门用于静态资源的目录 (static/)。 在这里我们可以放置我们明确不希望 webpack 打包的资源。 那么现在我们如何访问它们的路径呢？

使用 __static 变量

类似于 __dirname 在 Node.js 环境中工作时可以为您提供父目录名称的路径，__static 可用于为您提供 static/ 文件夹的路径。 此变量在 development 和 production 中均可用。

用例

假设我们有一个静态文本文件 (foobar.txt) 需要使用 fs 读取到我们的应用程序中。 以下是如何使用 __static 变量来获取资源可靠路径的方法。

static/foobar.txt

foobarbizzbuzz

someScript.js (main 或 renderer 进程)

import fs from 'fs'
import path from 'path'

/* use `path` to create the full path to our asset */
const pathToAsset = path.join(__static, '/foobar.txt')

/* use `fs` to consume the path and read our asset */
const fileContents = fs.readFileSync(pathToAsset, 'utf8')

console.log(fileContents)
// => "foobarbizzbuzz"