fix(webpack.config.template.js): change webpack config to fix bundle …

…duplication issue

Updating the webpack config to use optimization.splitChunks rather than entry.vendor resolves an issue that appears when jQuery or Bootstrap is added.
When attempting to use jQuery or the jQuery Bootstrap extensions in code, webpack is duplicating jQuery across the app end vendor bundles.
Using optimization.splitChunks allows webpack to workout the dependencies and also reduces the size of the generated bundles by splitting them up.

fixes this issue: #958

lib/resources/content/webpack.config.template.js

@@ -44,8 +44,7 @@ module.exports = ({production, server, extractCss, coverage, analyze, karma} = {
     alias: { 'aurelia-binding': path.resolve(__dirname, 'node_modules/aurelia-binding') }
   },
   entry: {
-    app: ['aurelia-bootstrapper'],
-    vendor: ['bluebird'],
+    app: ['aurelia-bootstrapper']
   },
   mode: production ? 'production' : 'development',
   output: {
@@ -55,6 +54,58 @@ module.exports = ({production, server, extractCss, coverage, analyze, karma} = {
     sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
     chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
   },
+  optimization: {
+    // Use splitChunks to breakdown the vendor bundle into smaller files
+    // https://webpack.js.org/plugins/split-chunks-plugin/
+    splitChunks: { 
+      chunks: "initial",
+      cacheGroups: {
+        default: false, // Disable the built-in groups (default and vendors)
+        vendors: false,
+        bluebird: {
+          test: /[\\/]node_modules[\\/]bluebird[\\/]/,
+          name: "vendor.bluebird",
+          enforce: true,
+          priority: 100
+        },
+        // You can insert additional entries here for jQuery and bootstrap etc. if you need them
+        // Break the Aurelia bundle down into smaller chunks, binding and templating are the largest
+        aureliaBinding: {
+          test: /[\\/]node_modules[\\/]aurelia-binding[\\/]/,
+          name: "vendor.aurelia-binding",
+          enforce: true,
+          priority: 28
+        },
+        aureliaTemplating: {
+          test: /[\\/]node_modules[\\/]aurelia-templating[\\/]/,
+          name: "vendor.aurelia-templating",
+          enforce: true,
+          priority: 26
+        },
+        aurelia: {
+          test: /[\\/]node_modules[\\/]aurelia-.*[\\/]/,
+          name: "vendor.aurelia",
+          enforce: true,
+          priority: 20
+        },
+        // This picks up everything else being used from node_modules
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+          enforce: true,
+          priority: 10
+        },
+        common: { // common chunk
+          name: 'common',
+          minChunks: 2,   // Creates a new chunk if a module is shared between different chunks more than twice
+          chunks: 'async',
+          priority: 0,
+          reuseExistingChunk: true,
+          enforce: true
+        }
+      }
+    }
+  },
   performance: { hints: false },
   devServer: {
     contentBase: outDir,