Added HtmlWebpackPlugin (electron-react-boilerplate#916)

anthonyraymond · Apr 17, 2017 · f36e9d2 · f36e9d2
1 parent 90f15ab
commit f36e9d2
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 38 deletions.
diff --git a/app/app.html b/app/app.html
@@ -3,41 +3,11 @@
   <head>
     <meta charset="utf-8">
     <title>Hello Electron React!</title>
-    <script>
-      (() => {
-        if (!process.env.HOT) {
-          const link = document.createElement('link');
-          link.rel = 'stylesheet';
-          link.href = './dist/style.css';
-          // HACK: Writing the script path should be done with webpack
-          document.getElementsByTagName('head')[0].appendChild(link);
-        }
-      })();
-    </script>
   </head>
   <body>
     <div id="root"></div>
-    <script>
-      {
-        // Dynamically include DLL if in development
-        if (process.env.NODE_ENV === 'development') {
-          const dllScript = document.createElement('script');
-          dllScript.src = '../dll/vendor.dll.js';
-          document.body.appendChild(dllScript);
-        }
-
-        // Dynamically insert the renderer process
-        const script = document.createElement('script');
-        const port = process.env.PORT || 1212;
-
-        script.src = (process.env.HOT)
-          ? 'http://localhost:' + port + '/dist/bundle.js'
-          : './dist/bundle.js';
-
-        // @HACK: Writing the script path should be done
-        //        with HtmlWebpackPlugin
-        document.body.appendChild(script);
-      }
-    </script>
+    <% if (htmlWebpackPlugin.options.dll) { %>
+    <script src="<%= htmlWebpackPlugin.options.dll %>"></script>
+    <% } %>
   </body>
 </html>
diff --git a/app/main.development.js b/app/main.development.js
@@ -51,7 +51,10 @@ app.on('ready', async () => {
     height: 728
   });
 
-  mainWindow.loadURL(`file://${__dirname}/app.html`);
+  const url = (process.env.NODE_ENV === 'development')
+    ? `http://localhost:${process.env.PORT || 1212}/dist/app.html`
+    : `file://${__dirname}/dist/app.html`;
+  mainWindow.loadURL(url);
 
   // @TODO: Use 'ready-to-show' event
   //        https://github.com/electron/electron/blob/master/docs/api/browser-window.md#using-ready-to-show-event

diff --git a/webpack.config.renderer.dev.js b/webpack.config.renderer.dev.js
@@ -12,8 +12,10 @@ import fs from 'fs';
 import webpack from 'webpack';
 import chalk from 'chalk';
 import merge from 'webpack-merge';
+import express from 'express';
 import { spawn, execSync } from 'child_process';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 import baseConfig from './webpack.config.base';
 
 const port = process.env.PORT || 1212;
@@ -214,6 +216,15 @@ export default merge.smart(baseConfig, {
 
     new ExtractTextPlugin({
       filename: '[name].css'
+    }),
+
+    /**
+     * Dynamically generate index.html page
+     */
+    new HtmlWebpackPlugin({
+      filename: 'app.html',
+      template: 'app/app.html',
+      dll: `${publicPath}/dll/vendor.dll.js`
     })
   ],
 
@@ -236,7 +247,9 @@ export default merge.smart(baseConfig, {
       verbose: true,
       disableDotRule: false,
     },
-    setup() {
+    setup(app) {
+      app.use('/dist/dll/', express.static(dll));
+
       if (process.env.START_HOT) {
         spawn(
           'npm',

diff --git a/webpack.config.renderer.prod.js b/webpack.config.renderer.prod.js
@@ -160,9 +160,8 @@ export default merge.smart(baseConfig, {
      * Dynamically generate index.html page
      */
     new HtmlWebpackPlugin({
-      filename: '../app.html',
-      template: 'app/app.html',
-      inject: false
+      filename: 'app.html',
+      template: 'app/app.html'
     })
   ],
 });