chore: webpack config

.eslintrc

@@ -11,7 +11,7 @@
   "parserOptions": {
     "project": "./app/assets/javascripts/tsconfig.json"
   },
-  "ignorePatterns": [".eslintrc.js", "webpack.*.js"],
+  "ignorePatterns": [".eslintrc.js", "webpack.*.js", "webpack-defaults.js"],
   "rules": {
     "standard/no-callback-literal": 0, // Disable this as we have too many callbacks relying on literals
     "no-throw-literal": 0,

package.json

@@ -10,10 +10,10 @@
     "setup": "yarn install",
     "start": "webpack-dev-server --config webpack.dev.js",
     "watch": "webpack -w --config webpack.dev.js",
-    "watch:desktop": "webpack -w --config webpack.dev.js --env.platform='desktop'",
+    "watch:desktop": "webpack -w --config webpack.dev.js --env platform='desktop'",
     "bundle": "webpack --config webpack.prod.js && yarn tsc",
-    "bundle:desktop": "webpack --config webpack.prod.js --env.platform='desktop'",
-    "bundle:desktop:beta": "webpack --config webpack.prod.js --env.platform='desktop' --env.public_beta='true'",
+    "bundle:desktop": "webpack --config webpack.prod.js --env platform='desktop'",
+    "bundle:desktop:beta": "webpack --config webpack.prod.js --env platform='desktop' --env public_beta='true'",
     "build": "bundle install && yarn install --frozen-lockfile && bundle exec rails assets:precompile && yarn bundle",
     "lint": "eslint --fix app/assets/javascripts",
     "tsc": "tsc --project app/assets/javascripts/tsconfig.json"

webpack-defaults.js

@@ -0,0 +1,13 @@
+const Defaults = {
+  platform: 'web',
+};
+
+function mergeWithEnvDefaults(env) {
+  for (const key of Object.keys(Defaults)) {
+    if (!env[key]) {
+      env[key] = Defaults[key];
+    }
+  }
+}
+
+module.exports = mergeWithEnvDefaults;

webpack.config.js

@@ -1,14 +1,11 @@
 const path = require('path');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const mergeWithEnvDefaults = require('./webpack-defaults');
 require('dotenv').config();
 
-const WebEnv = {
-  platform: 'web',
-};
-
 module.exports = (env) => {
-  env = Object.assign(env, WebEnv);
+  mergeWithEnvDefaults(env);
   return {
     entry: './app/assets/javascripts/index.ts',
     output: {

webpack.dev.js

@@ -1,14 +1,12 @@
 const { merge } = require('webpack-merge');
 const config = require('./webpack.config.js');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-const WebEnv = {
-  platform: 'web',
-};
+const mergeWithEnvDefaults = require('./webpack-defaults.js');
 
 module.exports = (env, argv) => {
   const port = argv.port || 3001;
-  return merge(config(Object.assign(env, WebEnv), argv), {
+  mergeWithEnvDefaults(env);
+  return merge(config(env, argv), {
     mode: 'development',
     optimization: {
       minimize: false,

webpack.prod.js

@@ -1,12 +1,10 @@
 const { merge } = require('webpack-merge');
+const mergeWithEnvDefaults = require('./webpack-defaults.js');
 const config = require('./webpack.config.js');
 
-const WebEnv = {
-  platform: 'web',
-};
-
 module.exports = (env, argv) => {
-  return merge(config(Object.assign(env, WebEnv), argv), {
+  mergeWithEnvDefaults(env);
+  return merge(config(env, argv), {
     mode: 'production',
     devtool: 'source-map',
   });