How do I compile a preload script w/ webpack in Electron?

Question

Electron 1.6.5, Webpack 2.4.1 I'm using electron-react-boilerplate with a `webview` component. I inject a preload script into the `webview` that does something like this: ``` const { ipcRenderer } = require('electron'); const doSomething = require('./utils/do-some-thing.js'); document.addEventListener('DOMContentLoaded', event => { doSomeThing() // tell scraper to get started ipcRenderer.sendToHost('THING IS DONE', [{ url: document.URL }]); }); ``` `webview` needs this script passed as a `file://` path like so: ``` <webview preload={'./some/folder/preload.js''} {...props} /> ``` The problem is that my webpack setup doesn't transpile `preload.js` because it isn't explicitly called via `require()`. Then, when I build the app, the path `./some/folder/` doesn't exist. I've tried setting webpack to create a second compiled script like so: ``` entry: [ 'babel-polyfill', './app/index', './some/folder/preload.js' ], output: { path: path.join(__dirname, 'app/dist'), publicPath: '../dist/' }, `…

Accepted Answer

You could use the electron-main and electron-preload configurations of webpack:

```
const path = require('path');

module.exports = [
  {
    entry: './src/index.js',
    target: 'electron-main',
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'index.bundled.js'
    },
    node: {
        __dirname: false,
    }
  },
  {
    entry: './src/preload.js',
    target: 'electron-preload',
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'preload.bundled.js'
    }
  },
]
```

You get two bundles after building, but Electron is not in either of them, so no duplicates.

Notice the `__dirname: false`, which is required since otherwise webpack replaces `__dirname` always replaced by `/` by webpack, leading to an unexpected behaviour in almost all cases (see here for further information, should be false by default, but wasn't for me).

How do I compile a preload script w/ webpack in Electron?

Solution

Problem