refactor: consolidate webpack configs

.storybook/webpack.config.js

@@ -1,9 +1,13 @@
 require('@babel/register')
 
+const fs = require('fs')
+const path = require('path')
 const baseConfig = require('../webpack/webpack.config.base')
 const merge = require('webpack-merge')
+const config = require('config')
+const rootDir = path.join(__dirname, '..')
 
-const config = merge.smart(baseConfig, {
+module.exports = merge.smart(baseConfig, {
   default: {
     module: {
       rules: [
@@ -23,5 +27,3 @@ const config = merge.smart(baseConfig, {
     },
   },
 })
-
-module.exports = config

package.json

@@ -4,18 +4,12 @@
   "version": "0.5.0-alpha",
   "description": "desktop application for the lightning network",
   "scripts": {
-    "build": "cross-env NODE_CONFIG_ENV=production concurrently --raw \"npm:build-main\" \"npm:build-preload\" \"npm:build-renderer\"",
-    "build-e2e": "concurrently \"npm run build-main\" \"npm:build-preload\" \"npm run build-renderer-e2e\"",
-    "build-dll": "webpack -r @babel/register --config webpack/webpack.config.renderer.dev.dll.js",
-    "build-main": "webpack -r @babel/register --config webpack/webpack.config.main.prod.js",
-    "build-preload": "webpack -r @babel/register --config webpack/webpack.config.preload.prod.js",
-    "build-preload-dev": "webpack -r @babel/register --config webpack/webpack.config.preload.dev.js",
-    "build-renderer": "webpack -r @babel/register --config webpack/webpack.config.renderer.prod.js",
-    "build-renderer-e2e": "webpack -r @babel/register --config webpack/webpack.config.renderer.e2e.js",
+    "build": "cross-env NODE_CONFIG_ENV=production webpack -r @babel/register --config webpack/webpack.config.prod.js",
+    "build-e2e": "cross-env NODE_CONFIG_ENV=production webpack -r @babel/register --config webpack/webpack.config.e2e.js",
+    "build-dll": "webpack -r @babel/register --config webpack/webpack.config.dll.js",
     "clean": "rimraf node_modules dll dist coverage .eslintcache",
     "coverage": "open coverage/index.html",
     "coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
-    "predev": "npm run build-preload-dev",
     "dev": "cross-env HOT=1 npm run start-renderer-dev",
     "extract-messages": "extract-messages -l=af-ZA,ca-ES,de-DE,es-ES,ga-IE,hr-HR,ja-JP,no-NO,pt-PT,sr-SP,uk-UA,zh-TW,ar-SA,cs-CZ,el-GR,fi-FI,he-IL,hu-HU,ko-KR,pl-PL,ro-RO,sv-SE,vi-VN,bg-BG,da-DK,en,fr-FR,hi-IN,it-IT,nl-NL,pt-BR,ru-RU,tr-TR,zh-CN -o translations -d en --flat true renderer/**/messages.js",
     "fetch-lnd": "node ./scripts/fetch-lnd-for-packaging.js",
@@ -36,7 +30,7 @@
     "prestart": "cross-env NODE_CONFIG_ENV=production npm run build",
     "start": "cross-env NODE_ENV=production electron .",
     "start-main-dev": "electron -r @babel/register ./electron/main.js",
-    "start-renderer-dev": "webpack-dev-server -r @babel/register --config webpack/webpack.config.renderer.dev.js  --progress",
+    "start-renderer-dev": "webpack-dev-server -r @babel/register --config webpack/webpack.config.dev.js  --progress",
     "storybook": "cross-env NODE_ENV=storybook start-storybook -p 6006",
     "storybook:build": "cross-env NODE_ENV=storybook build-storybook",
     "storybook:deploy": "npm run storybook:build && gh-pages -t -d storybook-static -o origin -b gh-pages",
@@ -375,5 +369,5 @@
     "window-or-global": "1.0.1",
     "yup": "0.27.0"
   },
-  "main": "./dist/main.prod.js"
+  "main": "./dist/main.js"
 }

webpack/dev/common/devserver.js

@@ -0,0 +1,54 @@
+import { spawn } from 'child_process'
+import { mainLog } from '@zap/utils/log'
+
+export const port = process.env.PORT || 1212
+export const publicPath = `http://localhost:${port}/dist`
+
+const devServer = {
+  port,
+  hot: true,
+  publicPath,
+  headers: { 'Access-Control-Allow-Origin': '*' },
+  writeToDisk: true,
+
+  watchOptions: {
+    aggregateTimeout: 300,
+    ignored: /node_modules/,
+    poll: 100,
+  },
+
+  proxy: {
+    '/proxy/zap.jackmallers.com': {
+      target: 'https://zap.jackmallers.com',
+      pathRewrite: { '^/proxy/zap.jackmallers.com': '' },
+      changeOrigin: true,
+    },
+    '/proxy/api.coinbase.com': {
+      target: 'https://api.coinbase.com',
+      pathRewrite: { '^/proxy/api.coinbase.com': '' },
+      changeOrigin: true,
+    },
+    '/proxy/tchain.api.btc.com': {
+      target: 'https://tchain.api.btc.com',
+      pathRewrite: { '^/proxy/tchain.api.btc.com': '' },
+      changeOrigin: true,
+    },
+  },
+
+  historyApiFallback: true,
+
+  // Start the main process as soon as the server is listening.
+  after: () => {
+    if (process.env.HOT) {
+      spawn('npm', ['run', 'start-main-dev'], {
+        shell: true,
+        env: process.env,
+        stdio: 'inherit',
+      })
+        .on('close', code => process.exit(code))
+        .on('error', spawnError => mainLog.error(spawnError))
+    }
+  },
+}
+
+export default devServer

webpack/dev/common/plugins.js

@@ -0,0 +1,14 @@
+import webpack from 'webpack'
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
+
+const plugins = [
+  new webpack.EnvironmentPlugin({
+    NODE_ENV: 'development',
+  }),
+  new BundleAnalyzerPlugin({
+    analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
+    openAnalyzer: process.env.OPEN_ANALYZER === 'true',
+  }),
+]
+
+export default plugins

webpack/webpack.config.preload.dev.js → webpack/dev/main.config.js

@@ -1,47 +1,40 @@
 /**
- * Webpack config for development electron preload process
+ * Webpack config for production electron main process
  */
 
 import path from 'path'
 import merge from 'webpack-merge'
 import { EnvironmentPlugin } from 'webpack'
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
-import baseConfig, { rootDir } from './webpack.config.base'
-
-export default merge.smart(baseConfig, {
-  devtool: 'source-map',
-
-  target: 'electron-renderer',
+import baseConfig, { rootDir } from '../webpack.config.base'
+import devServer, { publicPath } from './common/devserver'
 
+const config = merge.smart(baseConfig, {
+  name: 'main',
+  target: 'electron-main',
   mode: 'development',
-
+  devtool: 'source-map',
   entry: {
-    preload: path.join(rootDir, 'electron', 'preload'),
+    main: path.join(rootDir, 'electron', 'main'),
   },
-
   output: {
-    path: path.join(rootDir, 'dist'),
-    filename: '[name].dev.js',
+    filename: '[name].js',
+    publicPath,
   },
-
+  devServer,
   plugins: [
     new EnvironmentPlugin({
       NODE_ENV: 'development',
     }),
-
     new BundleAnalyzerPlugin({
       analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
       openAnalyzer: process.env.OPEN_ANALYZER === 'true',
     }),
   ],
-
-  /**
-   * Disables webpack processing of __dirname and __filename.
-   * If you run the bundle in node.js it falls back to these values of node.js.
-   * https://github.com/webpack/webpack/issues/2010
-   */
   node: {
     __dirname: false,
     __filename: false,
   },
 })
+
+export default config

webpack/dev/preload.config.js

@@ -0,0 +1,27 @@
+import path from 'path'
+import merge from 'webpack-merge'
+import baseConfig, { rootDir } from '../webpack.config.base'
+import devServer, { publicPath } from './common/devserver'
+import plugins from './common/plugins'
+
+const config = merge.smart(baseConfig, {
+  name: 'preload',
+  target: 'electron-renderer',
+  mode: 'development',
+  devtool: 'source-map',
+  entry: {
+    preload: path.join(rootDir, 'electron', 'preload'),
+  },
+  output: {
+    filename: '[name].js',
+    publicPath,
+  },
+  devServer,
+  plugins,
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+})
+
+export default config

webpack/dev/renderer.config.js

@@ -0,0 +1,86 @@
+/* eslint global-require: 0, import/no-dynamic-require: 0 */
+import path from 'path'
+import webpack from 'webpack'
+import merge from 'webpack-merge'
+import AddAssetHtmlPlugin from 'add-asset-html-webpack-plugin'
+import CopyWebpackPlugin from 'copy-webpack-plugin'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import CspHtmlWebpackPlugin from 'csp-html-webpack-plugin'
+import baseConfig, { rootDir } from '../webpack.config.base'
+import devServer, { publicPath } from './common/devserver'
+import plugins from './common/plugins'
+
+const dll = path.resolve(rootDir, 'dll')
+const manifest = path.resolve(dll, 'renderer.json')
+
+const config = merge.smart(baseConfig, {
+  name: 'renderer',
+  target: 'web',
+  mode: 'development',
+  devtool: 'inline-source-map',
+  entry: {
+    renderer: path.join(rootDir, 'renderer', 'index'),
+  },
+  output: {
+    filename: '[name].js',
+    publicPath,
+  },
+  stats: {
+    children: false,
+  },
+  devServer,
+  plugins: [
+    ...plugins,
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: path.join('renderer', 'app.html'),
+    }),
+    new CspHtmlWebpackPlugin({
+      'default-src': "'self'",
+      'object-src': "'none'",
+      'connect-src': [
+        "'self'",
+        'http://localhost:*',
+        'ws://localhost:*',
+        'https://api.coinbase.com/',
+        'https://testnet-api.smartbit.com.au',
+        'https://tchain.api.btc.com',
+        'https://api.blockcypher.com',
+        'https://bitcoinfees.earn.com',
+        'https://zap.jackmallers.com',
+      ],
+      'img-src': ['http://www.zap.jackmallers.com'],
+      'script-src': ["'self'", 'http://localhost:*', "'unsafe-eval'"],
+      'font-src': [
+        "'self'",
+        'data:',
+        'http://localhost:*',
+        'https://s3.amazonaws.com',
+        'https://fonts.gstatic.com',
+      ],
+      'style-src': ["'self'", 'blob:', 'https://s3.amazonaws.com', "'unsafe-inline'"],
+    }),
+    new webpack.DllReferencePlugin({
+      context: process.cwd(),
+      manifest: require(manifest),
+      sourceType: 'var',
+    }),
+    new AddAssetHtmlPlugin({
+      filepath: path.join('dll', 'renderer.dll.js'),
+      includeSourcemap: true,
+    }),
+    new CopyWebpackPlugin([
+      path.join('renderer', 'empty.html'),
+      { from: path.join('electron', 'about'), to: 'about' },
+    ]),
+  ],
+  node: {
+    fs: 'empty',
+    module: 'empty',
+  },
+  optimization: {
+    noEmitOnErrors: true,
+  },
+})
+
+export default config

webpack/prod/common/plugins.js

@@ -0,0 +1,15 @@
+import webpack from 'webpack'
+
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
+
+const plugins = [
+  new webpack.EnvironmentPlugin({
+    NODE_ENV: 'production',
+  }),
+  new BundleAnalyzerPlugin({
+    analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
+    openAnalyzer: process.env.OPEN_ANALYZER === 'true',
+  }),
+]
+
+export default plugins

webpack/webpack.config.main.prod.js → webpack/prod/main.config.js

@@ -6,44 +6,33 @@ import path from 'path'
 import merge from 'webpack-merge'
 import { EnvironmentPlugin } from 'webpack'
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
-import baseConfig, { rootDir } from './webpack.config.base'
-
-export default merge.smart(baseConfig, {
-  devtool: 'source-map',
+import baseConfig, { rootDir } from '../webpack.config.base'
 
+const config = merge.smart(baseConfig, {
+  name: 'main',
   target: 'electron-main',
-
   mode: 'production',
-
-  externals: ['config'],
-
+  devtool: 'source-map',
   entry: {
     main: path.join(rootDir, 'electron', 'main'),
   },
-
   output: {
+    filename: '[name].js',
     path: path.join(rootDir, 'dist'),
-    filename: '[name].prod.js',
   },
-
   plugins: [
     new EnvironmentPlugin({
-      NODE_ENV: 'production',
+      NODE_ENV: 'development',
     }),
-
     new BundleAnalyzerPlugin({
       analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
       openAnalyzer: process.env.OPEN_ANALYZER === 'true',
     }),
   ],
-
-  /**
-   * Disables webpack processing of __dirname and __filename.
-   * If you run the bundle in node.js it falls back to these values of node.js.
-   * https://github.com/webpack/webpack/issues/2010
-   */
   node: {
     __dirname: false,
     __filename: false,
   },
 })
+
+export default config

webpack/prod/preload.config.js

@@ -0,0 +1,25 @@
+import path from 'path'
+import merge from 'webpack-merge'
+import baseConfig, { rootDir } from '../webpack.config.base'
+import plugins from './common/plugins'
+
+const config = merge.smart(baseConfig, {
+  name: 'preload',
+  target: 'electron-renderer',
+  mode: 'production',
+  devtool: 'source-map',
+  entry: {
+    preload: path.join(rootDir, 'electron', 'preload'),
+  },
+  output: {
+    filename: '[name].js',
+    path: path.join(rootDir, 'dist'),
+  },
+  plugins,
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+})
+
+export default config