feat(webpack): Add custom environment support (#34)

README.md

@@ -295,20 +295,25 @@ module.exports = {
 }
 ```
 
-Environment variables can also be configured separately for development and production:
+Environment variables can also be configured separately for development and production, plus any custom environments. The default environment for `sku build` is `production`, however you can select a custom environment to build your application by passing the command line argument `--env` (`-e` for shorthand). The environment is also passed to your code using `process.env.SKU_ENV`. Please note that these environments are not related to `NODE_ENV`.
+
+`sku build --env testing`
 
 ```js
 module.exports = {
   ...
   env: {
     API_ENDPOINT: {
       development: '/mock/api',
+      testing: 'http://localhost/test/api',
       production: 'https://example.com/real/api'
     }
   }
 }
 ```
 
+Note: Running `sku start` will always use the `development` environment.
+
 ### Compile Packages
 
 Sometimes you might want to extract and share code between sku projects, but this code is likely to rely on the same tooling and language features that this toolkit provides. A great example of this is [seek-style-guide](https://github.com/seek-oss/seek-style-guide). Out of the box sku supports loading the seek-style-guide but if you need to treat other packages in this way you can use `compilePackages`.

config/args.js

@@ -1,8 +1,21 @@
+const commandLineArgs = require('command-line-args');
+
 const scriptNameRegex = /scripts[\/\\]([\w-]*)\.js$/i;
 const scriptName = process.argv[1].match(scriptNameRegex)[1];
 
+const optionDefinitions = [
+  {
+    name: 'env',
+    alias: 'e',
+    type: String,
+    defaultValue: 'production'
+  }
+];
+
+const options = commandLineArgs(optionDefinitions);
+
 module.exports = {
   script: scriptName,
   buildName: scriptName === 'start' ? process.argv[2] : null,
-  profile: scriptName === 'build' ? 'production' : 'development'
+  env: scriptName === 'start' ? 'development' : options.env
 };

config/webpack/webpack.config.js

@@ -105,31 +105,32 @@ const buildWebpackConfigs = builds.map(
           return JSON.stringify(value);
         }
 
-        const valueForProfile = value[args.profile];
+        const valueForEnv = value[args.env];
 
-        if (typeof valueForProfile === 'undefined') {
+        if (typeof valueForEnv === 'undefined') {
           console.log(
-            `WARNING: Environment variable "${key}" for build "${name}" is missing a value for the "${args.profile}" profile`
+            `WARNING: Environment variable "${key}" for build "${name}" is missing a value for the "${args.env}" environment`
           );
           process.exit(1);
         }
 
-        return JSON.stringify(valueForProfile);
+        return JSON.stringify(valueForEnv);
       })
+      .set('SKU_ENV', JSON.stringify(args.env))
       .mapKeys((value, key) => `process.env.${key}`)
       .value();
 
     const internalJs = [paths.src, ...paths.compilePackages];
 
     const entry = [paths.clientEntry];
-    const devEntries = [
+    const devServerEntries = [
       `${require.resolve(
         'webpack-dev-server/client'
       )}?http://localhost:${port}/`
     ];
 
-    if (!isProductionBuild) {
-      entry.unshift(...devEntries);
+    if (args.script === 'start') {
+      entry.unshift(...devServerEntries);
     }
 
     return [

package.json

@@ -55,6 +55,7 @@
     "bluebird": "^3.5.0",
     "chalk": "^2.0.1",
     "classnames": "^2.2.5",
+    "command-line-args": "^4.0.6",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.26.1",
     "deasync-promise": "^1.0.1",