Using Static Assets
webpack to bundle all of our assets together we lose the ability to provide a full path to our assets. This is especially important when we need to use modules like
fs or those that require a file path to an asset.
electron-webpack is aware of that issue and provides a solution.
You may have noticed in Project Structure there is a directory specifically for static assets (
static/). It is here where we can put assets we explicity don’t want
webpack to bundle. So now how can we access their path?
Similar to how
__dirname can provide you with a path to the parent directory name when working in a Node.js environment,
__static is made available to provide you a path to your
static/ folder. This variable is available in both
Let’s say we have a static Text file (
foobar.txt) we need to read into our application using
fs. Here’s how we can use the
__static variable to get a reliable path to our asset.
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"