refactor(webpack): remove inline scripts

Use `HtmlWebpackPlugin` to generate our final html file so that we can remove our inline scripts and insert them dynamically based on our webpack config.
7 years ago · ab087586cc
6 changed files with 51 additions and 39 deletions
--- a/app/app.html
+++ b/app/app.html
@ -13,44 +13,8 @@
    <link href='https://fonts.googleapis.com/css?family=Raleway:700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Roboto:300' rel='stylesheet' type='text/css'>
-    <script>
-      (function() {
-        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>
-      {
-        const scripts = [];
-
-        // Dynamically insert the DLL script in development env in the
-        // renderer process
-        if (process.env.NODE_ENV === 'development') {
-          scripts.push('../dll/renderer.dev.dll.js');
-        }
-
-        // Dynamically insert the bundled app script in the renderer process
-        const port = process.env.PORT || 1212;
-        scripts.push(
-          (process.env.HOT)
-            ? 'http://localhost:' + port + '/dist/renderer.dev.js'
-            : './dist/renderer.prod.js'
-        );
-
-        document.write(
-          scripts
-            .map(script => '<script defer src="' + script + '"><\/script>')
-            .join('')
-        );
-      }
-    </script>
  </body>
 </html>
--- a/app/main.dev.js
+++ b/app/main.dev.js
@ -256,7 +256,12 @@ app.on('ready', async () => {
    minHeight: 425
  })

-  mainWindow.loadURL(`file://${__dirname}/app.html`)
+  if (process.env.HOT) {
+    const port = process.env.PORT || 1212
+    mainWindow.loadURL(`http://localhost:${port}/dist/index.html`)
+  } else {
+    mainWindow.loadURL(`file://${__dirname}/dist/index.html`)
+  }

  // @TODO: Use 'ready-to-show' event
  //        https://github.com/electron/electron/blob/master/docs/api/browser-window.md#using-ready-to-show-event
--- a/package.json
+++ b/package.json
@ -52,7 +52,6 @@
    "files": [
      "dist/",
      "node_modules/",
-      "app.html",
      "main.prod.js",
      "main.prod.js.map",
      "package.json"
@ -144,6 +143,7 @@
  "devDependencies": {
    "@commitlint/cli": "^7.0.0",
    "@commitlint/config-conventional": "^7.0.1",
+    "add-asset-html-webpack-plugin": "^2.1.3",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-jest": "^23.0.1",
--- a/webpack.config.renderer.dev.js
+++ b/webpack.config.renderer.dev.js
@ -13,6 +13,8 @@ import webpack from 'webpack'
 import merge from 'webpack-merge'
 import { spawn, execSync } from 'child_process'
 import ExtractTextPlugin from 'extract-text-webpack-plugin'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import AddAssetHtmlPlugin from 'add-asset-html-webpack-plugin'
 import baseConfig from './webpack.config.base'
 import { mainLog } from './app/utils/log'

@ -217,6 +219,15 @@ export default merge.smart(baseConfig, {

    new ExtractTextPlugin({
      filename: '[name].css'
+    }),
+
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'app', 'app.html')
+    }),
+
+    new AddAssetHtmlPlugin({
+      filepath: path.join(__dirname, 'dll', 'renderer.dev.dll.js'),
+      includeSourcemap: false
    })
  ],

--- a/webpack.config.renderer.prod.js
+++ b/webpack.config.renderer.prod.js
@ -4,6 +4,7 @@

 import path from 'path'
 import ExtractTextPlugin from 'extract-text-webpack-plugin'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
 import merge from 'webpack-merge'
 import baseConfig from './webpack.config.base'
@ -144,6 +145,19 @@ export default merge.smart(baseConfig, {
    new BundleAnalyzerPlugin({
      analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
      openAnalyzer: process.env.OPEN_ANALYZER === 'true'
+    }),
+
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'app', 'app.html')
+    }),
+
+    new CspHtmlWebpackPlugin({
+      'default-src': "'self'",
+      'object-src': "'none'",
+      'connect-src': ["'self'", 'https://api.coinmarketcap.com', 'https://zap.jackmallers.com', 'https://testnet-api.smartbit.com.au'],
+      'script-src': ["'self'"],
+      'font-src': ["'self'", 'data:', 'https://fonts.googleapis.com', 'https://s3.amazonaws.com', 'https://fonts.gstatic.com'],
+      'style-src': ["'self'", 'blob:', 'https://fonts.googleapis.com', 'https://s3.amazonaws.com', 'https://fonts.gstatic.com', "'unsafe-inline'"]
    })
  ]
 })
--- a/yarn.lock
+++ b/yarn.lock
@ -472,6 +472,14 @@ acorn@^5.5.0, acorn@^5.6.2:
  version "5.7.1"
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"

+add-asset-html-webpack-plugin@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/add-asset-html-webpack-plugin/-/add-asset-html-webpack-plugin-2.1.3.tgz#1bb8cd9cf9bd612833a502397bb75da66b77ba32"
+  dependencies:
+    globby "^8.0.0"
+    micromatch "^3.1.3"
+    p-each-series "^1.0.0"
+
 ajv-keywords@^1.0.0:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
@ -7897,7 +7905,7 @@ micromatch@^2.3.11:
    parse-glob "^3.0.4"
    regex-cache "^0.4.2"

-micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8, micromatch@^3.1.9:
+micromatch@^3.1.10, micromatch@^3.1.3, micromatch@^3.1.4, micromatch@^3.1.8, micromatch@^3.1.9:
  version "3.1.10"
  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
  dependencies:
@ -8650,6 +8658,12 @@ p-cancelable@^0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.3.0.tgz#b9e123800bcebb7ac13a479be195b507b98d30fa"

+p-each-series@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
+  dependencies:
+    p-reduce "^1.0.0"
+
 p-finally@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@ -8670,6 +8684,10 @@ p-map@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.1.1.tgz#05f5e4ae97a068371bc2a5cc86bfbdbc19c4ae7a"

+p-reduce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
+
 p-timeout@^1.1.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-1.2.1.tgz#5eb3b353b7fce99f101a1038880bb054ebbea386"