电子找不到index.html [Webpack]

Question

以下是我为这个基本的小应用程序设置文件夹结构的方法。

没什么特别的，超级基本的。

该应用从index.js汇编到app.js

webpack.config.json

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

module.exports = {
  entry: {
    app: './app/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  target: 'electron-renderer',
  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  module: {
    rules: [
      {
        test: /\.js|.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: [['es2015', {'modules': false}], 'react']
        }
      },
    ],
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin
  ],
};

接下来我们有实际的index.js

index.js

const {BrowserWindow, app} = require('electron');
const React = require('react');
const {render} = require('react-dom');
const Welcome = require('./components/welcome.js');

require('dotenv').config()

const createApp = function() {
  let win = new BrowserWindow({
    width: 800,
    height: 800
  });

  win.focus();

  win.loadURL('file:///' + __dirname + "/index.html");

  win.on('closed', () => {
    win = null;
  });

  win.on('ready-to-show', () => {
    render(
      <Welcome />,
      document.getElementById('root')
    );

    win.show();

    if (process.env.ENV === 'dev') {
      win.webContents.openDevTools();
    }
  });
}

// When the app is ready, create it.
app.on('ready', createApp);

// When the app is closed, kill everything.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

这个翻转的行是：win.loadURL('file:///' + __dirname + "/index.html");显然dist/app.js不在目录的根目录下，因此无法看到index.html

编译应用程序以查看index.html的正确方法是什么？并正确加载？