

Electronの初心者なりにMain ProcessとRendering
Processの間の違いが分かっていますが、[この記事](https://qiita.com/necomeshi/items/1861ff80e689a377899a)を読んで、Webpackで構成されるElectornアプリには`target:
'electron-
renderer'`専用ファイルは何の為必要か、良くわかりませんでした。そもそも、レンダリングプロセス専用エントリーポイントファイル（`src/renderer/index.js`）の中身は、記事に見せられませんでした。

[code]

    var renderer = {
      mode: 'development',
      target: 'electron-renderer',
      entry: path.join(__dirname, 'src', 'renderer', 'index'),
      output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist', 'scripts')
      },
      // 省略
    }
    
    module.exports = [
      main, renderer
    ];
    
[/code]

自分でアプリを作ってみたときに、上記の`renderer`というWebpackプレセットを定義しないでみました。下記のWebpack設定だけでは、`election
InitializeProject_GUI.js`で、全部正常に表示されます。

[code]

    module.exports = (env, argv) => {
      return {
          name: 'Electron: main process',
          target: 'electron-main',
    
          context,
          entry: {
            'InitializeProject_GUI': './InitializeProject_GUI.ts',
          },
    
          output: {
            path: __dirname,
            filename: '[name].js'
          },
    
          node: {
            __dirname: false,
            __filename: false
          },
    
          // 省略
        }
    };
    
[/code]

**InitializeProject_GUI** (ソースファイルはTypeScript)

[code]

    import URL from 'url';
    import Path from 'path';
    
    import {
      app as electronApplication,
      App as ElectronApplication,
      BrowserWindow
    } from 'electron';
    import enableElectronDebug from 'electron-debug';
    
    class ProjectInitializer {
    
      private electronApplication: ElectronApplication;
      private mainWindow: BrowserWindow | null = null;
    
      private static SOURCE_FILES_DIRECTORY_RELATIVE_PATH: string = 'Source';
      private static MARKUP_AND_STYLES_DIRECTORY_RELATIVE_PATH: string = 'GUI';
      private static MAIN_WINDOW_MARKUP__FILE_NAME_WITH_EXTENSION: string = 'MainWindow.html';
    
      private constructor() {
    
        this.electronApplication = electronApplication;
    
        enableElectronDebug();
    
        this.electronApplication.on('ready', this.onApplicationReadyEventHandler.bind(this));
      }
    
      public static start(): void {
        const projectInitializer: ProjectInitializer = new ProjectInitializer();
      }
    
      private onApplicationReadyEventHandler(): void {
    
        this.mainWindow = new BrowserWindow({
          width: 640,
          height: 500,
          titleBarStyle: 'hidden'
        });
    
        this.mainWindow.loadURL(URL.format({
          pathname: Path.join(
              __dirname,
              ProjectInitializer.SOURCE_FILES_DIRECTORY_RELATIVE_PATH,
              ProjectInitializer.MARKUP_AND_STYLES_DIRECTORY_RELATIVE_PATH,
              ProjectInitializer.MAIN_WINDOW_MARKUP__FILE_NAME_WITH_EXTENSION
          ),
          protocol: 'file:',
          slashes: true
        }));
    
        this.mainWindow.setMenu(null);
      }
    }
    
    (function executeApplication(): void {
      ProjectInitializer.start();
    })();
    
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
       <head>
          <title>新規プロジェクト展開</title>
       </head>
       <body>
          <h1>Hello, world!</h1>
       </body>
    </html>
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/WT2C7.png)](https://i.stack.imgur.com/WT2C7.png)

さて、レンダリングプロセス専用スクリプトファイルは、何の為に要りますでしょうか。  
そして、要るとしたら、それの中身は、どうすれば宜しいでしょうか。


CC BY-SA 4.0
2019-06-10T06:43:05.857
55674
2019-06-10T06:55:00.130
2019-06-10T06:55:00.130
3060
16876
question
webpack electron
レンダリング専用スクリプトが無くても正常に表示されるのは何故か？