[webpack] Refactor configs (#3503)

package.json

@@ -11,30 +11,28 @@
     "test-e2e": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 mocha --retries 2 --compilers js:@babel/register --require ./test/setup.js ./test/e2e.js",
     "lint": "./node_modules/.bin/eslint app --ext .js --ext .jsx && ./node_modules/.bin/eslint test --ext .js && ./node_modules/.bin/stylelint 'app/**/*.css'",
     "lint-fix": "./node_modules/.bin/eslint app --ext .js --ext .jsx --fix && ./node_modules/.bin/eslint test --ext .js --fix && ./node_modules/.bin/stylelint 'app/**/*.css' --fix",
-    "hot-server": "cross-env NODE_ENV=development node --max_old_space_size=4096 -r @babel/register server.js",
-    "build-main": "cross-env NODE_ENV=production node -r @babel/register ./node_modules/webpack/bin/webpack --config webpack.config.electron.production.js --progress=profile --color",
-    "build-renderer": "cross-env NODE_ENV=production node -r @babel/register ./node_modules/webpack/bin/webpack --config webpack.config.production.js --progress=profile --color",
-    "build-trezor": "cross-env NODE_ENV=production node -r @babel/register ./node_modules/webpack/bin/webpack --config webpack.config.trezor.js --progress=profile --color",
-    "build-preload": "cross-env NODE_ENV=production node -r @babel/register ./node_modules/webpack/bin/webpack --config webpack.config.preload.js --progress=profile --color",
-    "build": "npm run build-trezor && npm run build-preload &&  npm run build-main && npm run build-renderer",
+    "hot-server": "node server.mjs",
+    "build-main": "webpack --config webpack/electron.prod.js --progress=profile --color",
+    "build-renderer": "webpack --config webpack/ui.prod.js --progress=profile --color",
+    "build-trezor": "webpack --config webpack/trezor.js --progress=profile --color",
+    "build-preload": "webpack --config webpack/preload.prod.js --progress=profile --color",
+    "build": "yarn build-trezor && yarn build-preload &&  yarn build-main && yarn build-renderer",
     "dexsite": "node ./scripts/dexsite.js",
     "rebuild-natives": "node_modules/.bin/electron-rebuild",
     "rebuild-dexc": "cd modules/dex && npm run install",
     "start": "cross-env NODE_ENV=production electron ./app/ --debug --custombinpath=./bin",
-    "start-hot": "webpack --progress -c webpack.config.electron.development.js && cross-env HOT=1 NODE_ENV=development electron -r @babel/register -r @babel/polyfill ./app/main.js",
-    "start-hot-nosandbox": "webpack -c webpack.config.electron.development.js &&  cross-env HOT=1 NODE_ENV=development electron -r @babel/register -r @babel/polyfill ./app/main.js -r --no-sandbox",
-    "start-preload": "webpack -c webpack.config.preload.js --watch",
-    "postinstall": "electron-builder install-app-deps && npm run rebuild-dexc && npm rum dexsite",
-    "dev": "npm run build-preload && npm run hot-server -- --start-hot",
-    "dev-nosandbox": "npm run hot-server -- --start-hot-nosandbox",
-    "package": "npm run build && ./node_modules/.bin/electron-builder build --publish never",
-    "package-win": "npm run build && ./node_modules/.bin/electron-builder build --win --x64 --ia32",
-    "package-linux": "npm run build && ./node_modules/.bin/electron-builder build --linux",
-    "package-mac": "npm run build && ./node_modules/.bin/electron-builder build --mac",
-    "package-all": "npm run build && ./node_modules/.bin/electron-builder build -mwl",
-    "package-dev-linux": "npm run build && ./node_modules/.bin/electron-builder build --linux tar.gz",
-    "cleanup": "mop -v",
-    "flow": "flow",
+    "start-hot": "webpack --progress -c webpack/electron.dev.js && cross-env HOT=1 NODE_ENV=development electron -r @babel/register -r @babel/polyfill ./app/main.js",
+    "start-hot-nosandbox": "webpack -c webpack/electron.dev.js &&  cross-env HOT=1 NODE_ENV=development electron -r @babel/register -r @babel/polyfill ./app/main.js -r --no-sandbox",
+    "start-preload": "webpack -c webpack/preload.dev.js --watch",
+    "postinstall": "electron-builder install-app-deps && yarn rebuild-dexc && npm run dexsite",
+    "dev": "yarn hot-server -- --start-hot",
+    "dev-nosandbox": "yarn hot-server -- --start-hot-nosandbox",
+    "package": "yarn build && ./node_modules/.bin/electron-builder build --publish never",
+    "package-win": "yarn build && ./node_modules/.bin/electron-builder build --win --x64 --ia32",
+    "package-linux": "yarn build && ./node_modules/.bin/electron-builder build --linux",
+    "package-mac": "yarn build && ./node_modules/.bin/electron-builder build --mac",
+    "package-all": "yarn build && ./node_modules/.bin/electron-builder build -mwl",
+    "package-dev-linux": "yarn build && ./node_modules/.bin/electron-builder build --linux tar.gz",
     "i18n-prepare-untranslated": "node ./scripts/prepareUntranslated.js && ./node_modules/.bin/rip json2pot 'app/i18n/extracted/**/*.json' -c id -o app/i18n/pot/decrediton.pot",
     "i18n-assemble-translated": "node ./scripts/assembleTranslated.js && ./node_modules/.bin/rip po2json 'app/i18n/po/*.po' -m 'app/i18n/extracted/**/*.json' -c id -o app/i18n/translations --indentation 2 --sort-by-id",
     "i18n-check-docs": "node ./scripts/docsTranslationStatus.js",

server.js → server.mjs

@@ -10,10 +10,12 @@ import webpack from "webpack";
 import webpackDevMiddleware from "webpack-dev-middleware";
 import webpackHotMiddleware from "webpack-hot-middleware";
 import { spawn } from "child_process";
+import fs from "fs";
+import minimist from "minimist";
 
-import config from "./webpack.config.development";
+import config from "./webpack/ui.dev.js";
 
-const argv = require("minimist")(process.argv.slice(2));
+const argv = minimist(process.argv.slice(2));
 
 const app = express();
 const compiler = webpack(config);
@@ -31,14 +33,26 @@ app.use(wdm);
 app.use(webpackHotMiddleware(compiler));
 
 let preloadProc;
+const sleep = (ms) => new Promise(ok => setTimeout(ok, ms));
 
-const server = app.listen(PORT, "localhost", serverError => {
+const server = app.listen(PORT, "localhost", async serverError => {
   if (serverError) {
     return console.error(serverError);
   }
 
-  // Start a webpack run to watch for changes to the preload script.
+  // Start a webpack run to watch for changes to the preload script. We wait
+  // until the preload script is compiled to proceed with the server init.
+  const preloadPath = "./app/dist/wallet-preload.js";
+  if (fs.existsSync(preloadPath)) fs.unlinkSync(preloadPath);
   preloadProc = spawn("npm", ["run", "start-preload"], { shell: true, env: process.env, stdio: "inherit" });
+  for (let i = 0; i < 60; i++) {
+    await sleep(1000);
+    if (fs.existsSync(preloadPath)) break;
+  }
+  if (!fs.existsSync(preloadPath)) {
+    throw "Preload script not created at " + preloadPath;
+  }
+
 
   if (argv["start-hot"]) {
     spawn("npm", [ "run", "start-hot" ], { shell: true, env: process.env, stdio: "inherit" })

webpack.config.electron.development.js → webpack/electron.dev.js

@@ -3,7 +3,7 @@
  */
 
 const merge = require("webpack-merge").default;
-const baseConfig = require("./webpack.config.electron.production.js");
+const baseConfig = require("./electron.prod.js");
 
 module.exports = merge(baseConfig, {
   mode: "development",

webpack.config.electron.production.js → webpack/electron.prod.js

@@ -9,13 +9,15 @@ module.exports = {
   // Generate code for electron's ipc-main process.
   target: "electron-main",
 
+  mode: "production",
+
   devtool: "source-map",
 
   entry: [ "@babel/polyfill", "./app/main.development" ],
 
   // 'main.js' in root
   output: {
-    path: path.resolve(__dirname, "app"),
+    path: path.resolve(__dirname, "../app"),
     filename: "main.js"
   },
 
@@ -52,13 +54,12 @@ module.exports = {
 
   resolve: {
     extensions: [ ".js", ".jsx", ".json", ".node" ],
-    modules: [
-      "node_modules"
-    ],
+    modules: [ path.resolve(__dirname, "../app"), "node_modules" ],
     alias: {
-      ws: path.resolve(path.join(__dirname, "node_modules/ws/index.js")),
-      fetchModule: path.resolve(path.join(__dirname, "node_modules/electron-fetch/lib/index.js")),
-      walletCrypto: path.resolve(__dirname, "app/wallet/crypto.js")
+      sbffi: path.resolve(path.join(__dirname, "../node_modules/sbffi")),
+      ws: path.resolve(path.join(__dirname, "../node_modules/ws/index.js")),
+      fetchModule: path.resolve(path.join(__dirname, "../node_modules/electron-fetch/lib/index.js")),
+      walletCrypto: path.resolve(__dirname, "../app/wallet/crypto.js")
     }
   }
 };

webpack/preload.dev.js

@@ -0,0 +1,14 @@
+/**
+ * Build config for the preload script in development mode.
+ */
+
+const merge = require("webpack-merge").default;
+const baseConfig = require("./preload.prod.js");
+
+module.exports = merge(baseConfig, {
+  mode: "development",
+
+  optimization: {
+    minimize: false
+  }
+});

webpack.config.preload.js → webpack/preload.prod.js

@@ -18,7 +18,7 @@ module.exports = {
 
     output: {
       filename: "wallet-preload.js",
-      path: path.join(__dirname, "app/dist"),
+      path: path.join(__dirname, "../app/dist"),
       publicPath: "./",
       library: {
         name: "_decrediton",
@@ -38,10 +38,10 @@ module.exports = {
 
     resolve: {
         alias: {
-          fetchModule: path.resolve(__dirname, "app/helpers/fetchModule.js"),
-          walletCrypto: path.resolve(__dirname, "app/wallet/crypto.js")
+          fetchModule: path.resolve(__dirname, "../app/helpers/fetchModule.js"),
+          walletCrypto: path.resolve(__dirname, "../app/wallet/crypto.js")
         },
-        modules: ["node_modules"]
+        modules: [ "app", "node_modules" ]
     },
 
     plugins: [

webpack.config.trezor.js → webpack/trezor.js

@@ -3,12 +3,12 @@
  * separate iframe in the wallet.
  */
 
-import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
-import path from "path";
-import webpack from "webpack";
-import HtmlWebpackPlugin from "html-webpack-plugin";
-import CopyWebpackPlugin from "copy-webpack-plugin";
-import TerserPlugin from "terser-webpack-plugin";
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
 
 module.exports = {
     mode: "production",
@@ -21,7 +21,7 @@ module.exports = {
 
     output: {
       filename: "trezor-iframe.js",
-      path: path.join(__dirname, "app/dist-trezor"),
+      path: path.join(__dirname, "../app/dist-trezor"),
       publicPath: "./"
     },
 

webpack.config.base.js → webpack/ui.base.js

@@ -2,8 +2,8 @@
  * Base webpack config. This is merged with other env-specific configs.
  */
 
-import path from "path";
-import webpack from "webpack";
+const path = require("path");
+const webpack = require("webpack");
 
 // We use this local implementation of the NodePolyfillPlugin instead of
 // importing the existing implementation from
@@ -29,7 +29,7 @@ class NodePolyfillPlugin {
   }
 }
 
-export default {
+module.exports = {
   mode: "production",
 
   target: "web",
@@ -56,7 +56,7 @@ export default {
   },
 
   output: {
-    path: path.join(__dirname, "app"),
+    path: path.join(__dirname, "../app"),
     filename: "bundle.js",
 
     // https://github.com/webpack/webpack/issues/1114
@@ -71,12 +71,12 @@ export default {
     extensions: [ ".js", ".jsx", ".json" ],
     mainFields: [ "webpack", "browser", "web", "browserify", [ "jam", "main" ], "main" ],
     alias: {
-      fetchModule: path.resolve(__dirname, "app/helpers/fetchModule.js"),
-      walletCrypto: path.resolve(__dirname, "app/helpers/walletCryptoModule.js")
+      fetchModule: path.resolve(__dirname, "../app/helpers/fetchModule.js"),
+      walletCrypto: path.resolve(__dirname, "../app/helpers/walletCryptoModule.js")
     },
     modules: [
-      path.resolve(__dirname, "app"),
-      path.resolve(__dirname, "app/components"),
+      path.resolve(__dirname, "../app"),
+      path.resolve(__dirname, "../app/components"),
       "node_modules"
     ]
   },

webpack.config.development.js → webpack/ui.dev.js

@@ -3,15 +3,15 @@
  * development environment.
  */
 
-import webpack from "webpack";
-import merge from "webpack-merge";
-import baseConfig from "./webpack.config.base";
-import HtmlWebpackPlugin from "html-webpack-plugin";
-import CopyWebpackPlugin from "copy-webpack-plugin";
+const webpack = require("webpack");
+const merge = require("webpack-merge").default;
+const baseConfig = require("./ui.base");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 const port = process.env.PORT || 3000;
 
-export default merge(baseConfig, {
+module.exports = merge(baseConfig, {
   mode: "development",
 
   devtool: "inline-source-map",

webpack.config.production.js → webpack/ui.prod.js

@@ -3,22 +3,22 @@
  * production environment.
  */
 
-import path from "path";
-import MiniCssExtractPlugin from "mini-css-extract-plugin";
-import TerserPlugin from "terser-webpack-plugin";
-import merge from "webpack-merge";
-import HtmlWebpackPlugin from "html-webpack-plugin";
-import CopyWebpackPlugin from "copy-webpack-plugin";
-import baseConfig from "./webpack.config.base";
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const merge = require("webpack-merge").default;
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const baseConfig = require("./ui.base");
 const webpack = require("webpack");
 
-const config = merge(baseConfig, {
+module.exports = merge(baseConfig, {
   devtool: "cheap-module-source-map",
 
   entry: ["@babel/polyfill", "./app/index"],
 
   output: {
-    path: path.join(__dirname, "app/dist"),
+    path: path.join(__dirname, "../app/dist"),
     publicPath: "../dist/"
   },
 
@@ -82,5 +82,3 @@ const config = merge(baseConfig, {
     ]
   }
 });
-
-export default config;