Changed webpack.config with a new loader

Tried a different approach to tackle the enviroment configurations. Instead of a typescript file, which is replaced based on the environment, this strategy uses json file to hold the configuration. The loader takes the basic config file and applies that environmentspecific changes (change environment.json and environment.production.json).

skeleton/webpack/aurelia_project/environment-loader.js

@@ -0,0 +1,45 @@
+const fs = require('fs');
+const path = require('path');
+const {
+  getOptions
+} = require('loader-utils');
+const validateOptions = require('schema-utils');
+const log = require('webpack-log');
+
+const loaderName = 'environment-loader';
+const logger = log({
+  name: loaderName
+});
+const schema = {
+  env: 'string'
+};
+const defaultOptions = {
+  env: "development"
+};
+
+const parseFileContent = (content, filePath) => {
+  try {
+    return JSON.parse(content);
+  } catch (e) {
+    logger.error(`Unable to parse the file ${filePath}; ${loaderName} can only be used to load and transform json files.`);
+  }
+}
+
+module.exports = function (source) {
+  const options = Object.assign(defaultOptions, getOptions(this));
+  validateOptions(schema, options, 'environment-loader');
+
+  const ext = path.extname(this.resourcePath);
+  const envFile = path.join(path.dirname(this.resourcePath), `${path.basename(this.resourcePath, ext)}.${options.env}${ext}`);
+  let envConfig = {};
+
+  if (fs.existsSync(envFile)) {
+    envConfig = parseFileContent(fs.readFileSync(envFile), envFile);
+  }
+  const sourceConfig = parseFileContent(source, this.resourcePath);
+
+  return JSON.stringify({
+    ...sourceConfig,
+    ...envConfig
+  });
+};

skeleton/webpack/src/environment.json

@@ -0,0 +1,4 @@
+{
+  "debug": true,
+  "testing": true
+}

skeleton/webpack/src/environment.production.json

@@ -0,0 +1,4 @@
+{
+  "debug": false,
+  "testing": false
+}

skeleton/webpack/webpack.config.js

@@ -50,7 +50,7 @@ const sassRules = [
 ];
 // @endif
 
-module.exports = ({ production, server, extractCss, coverage, analyze, karma } = {}) => ({
+module.exports = ({ production, extractCss, analyze, tests, hmr } = {}) => ({
   resolve: {
     // @if feat.typescript
     extensions: ['.ts', '.js'],
@@ -206,7 +206,8 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } =
   devServer: {
     contentBase: outDir,
     // serve index.html for all 404 (required for push-state)
-    historyApiFallback: true
+    historyApiFallback: true,
+    hot: hmr
   },
   devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
   module: {
@@ -278,7 +279,7 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } =
       // @if feat.babel
       {
         test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir,
-        options: coverage ? { sourceMap: 'inline', plugins: ['istanbul'] } : {}
+        options: tests ? { sourceMap: 'inline', plugins: ['istanbul'] } : {}
       },
       // @endif
       // @if feat.typescript
@@ -290,8 +291,11 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } =
       { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
       // load these fonts normally, as files:
       { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
+      { test: /environment\.json$/i, use: [
+        {loader: path.resolve("./aurelia_project/environment-loader.js"), query: {env: production ? 'production' : 'development' }},
+      ]},
       // @if feat.typescript
-      ...when(coverage, {
+      ...when(tests, {
         test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader',
         include: srcDir, exclude: [/\.(spec|test)\.[jt]s$/i],
         enforce: 'post', options: { esModules: true },
@@ -300,7 +304,7 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } =
     ]
   },
   plugins: [
-    ...when(!karma, new DuplicatePackageCheckerPlugin()),
+    ...when(!tests, new DuplicatePackageCheckerPlugin()),
     new AureliaPlugin(),
     new ProvidePlugin({
     // @if feat['scaffold-navigation']
@@ -336,15 +340,15 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } =
       // @endif
       metadata: {
         // available in index.ejs //
-        title, server, baseUrl
+        title, baseUrl
       }
     }),
     // ref: https://webpack.js.org/plugins/mini-css-extract-plugin/
     ...when(extractCss, new MiniCssExtractPlugin({ // updated to match the naming conventions for the js files
       filename: production ? 'css/[name].[contenthash].bundle.css' : 'css/[name].[hash].bundle.css',
       chunkFilename: production ? 'css/[name].[contenthash].chunk.css' : 'css/[name].[hash].chunk.css'
     })),
-    ...when(production || server, new CopyWebpackPlugin([
+    ...when(!tests, new CopyWebpackPlugin([
       { from: 'static', to: outDir, ignore: ['.*'] }])), // ignore dot (hidden) files
     ...when(analyze, new BundleAnalyzerPlugin())
   ]