Aurelia Webpack basic config (jquery, bootstrap, i18n, validation)

main.js

var Promise = require('bluebird'); // Promise polyfill for IE11
// Bluebird config
Promise.config({
    // Enable warnings
    warnings: true,
    // Enable long stack traces
    longStackTraces: true,
    // Enable cancellation
    cancellation: false,
    // Enable monitoring
    monitoring: false
});

import 'intl'; // add this line if having issues with aurelia-18n in safari and ie

import {bootstrap} from 'aurelia-bootstrapper-webpack';

import 'bootstrap-webpack';
import 'font-awesome-webpack';

import XHR from 'i18next-xhr-backend';

function loadLocales(url, options, callback, data) {
  try {
    // include locale files as webpack chunks
    let waitForLocale = require('bundle!json!../locale/'+url+'.json');
    waitForLocale((locale) => {
      callback(locale, {status: '200'});
    })
  } catch (e) {
    callback(null, {status: '404'});
  }
}

bootstrap(function(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-i18n', (instance) => {
        // register backend plugin
        instance.i18next.use(XHR);

        // adapt options to your needs (see http://i18next.com/docs/options/)
        return instance.setup({
          backend: {                                  // <-- configure backend settings
            loadPath: '{{lng}}/{{ns}}',
            parse: (data) => data,
            ajax: loadLocales
          },
          lng : 'de',
          attributes : ['t','i18n'],
          fallbackLng : 'en',
          debug : false,
          //compatibilityJSON: 'v1',
          ns: ['translation']
        });
      })
      .plugin('aurelia-validation', (config) => { config.useLocale('de-DE') })
      .plugin('aurelia-dialog');

  aurelia.start().then(() => aurelia.setRoot('app', document.body));
});

package.json

{
  "name": "Aurelia Webpack i18n, bootstrap, jquery basic config",
  "version": "0.1.3-pre.21",
  "description": "",
  "repository": "",
  "license": "",
  "COMMENT": "use --devtool eval-source-map to enable debug with source maps",
  "scripts": {
    "dev": "webpack-dev-server --config webpack.config.js --hot --inline --progress --devtool eval",
    "build": "webpack --config webpack.config.js --progress --profile",
    "prod": "webpack -p --config webpack.prod.config.js --progress --devtool source-map --optimize-max-chunks 1",
    "test": "karma start",
    "webdriver:update": "./node_modules/.bin/webdriver-manager update",
    "webdriver:start": "./node_modules/.bin/webdriver-manager start",
    "pree2e": "npm run webdriver:update -- --standalone",
    "e2e": "./node_modules/.bin/protractor"
  },
  "dependencies": {
    "aurelia-bootstrapper-webpack": "^1.0.0-beta.1.0.0",
    "aurelia-event-aggregator": "^1.0.0-beta.1.1.1",
    "aurelia-fetch-client": "^1.0.0-beta.1.1.0",
    "aurelia-framework": "^1.0.0-beta.1.1.3",
    "aurelia-history-browser": "^1.0.0-beta.1.1.2",
    "aurelia-i18n": "^0.5.1",
    "aurelia-logging-console": "^1.0.0-beta.1.1.4",
    "aurelia-pal-browser": "^1.0.0-beta.1.1.4",
    "aurelia-polyfills": "^1.0.0-beta.1.0.0",
    "aurelia-router": "^1.0.0-beta.1.1.1",
    "aurelia-templating-binding": "^1.0.0-beta.1.1.1",
    "aurelia-templating-resources": "^1.0.0-beta.1.1.1",
    "aurelia-templating-router": "^1.0.0-beta.1.1.1",
    "aurelia-validation": "^0.6.7",
    "bluebird": "^3.3.4",
    "bootstrap": "^3.3.6",
    "bootstrap-webpack": "0.0.5",
    "font-awesome": "^4.5.0",
    "font-awesome-webpack": "0.0.4",
    "i18next-xhr-backend": "^0.5.3",
    "jquery": "^2.2.3"
  },
  "devDependencies": {
    "aurelia-tools": "^0.1.18",
    "aurelia-webpack-plugin": "^1.0.0-beta.1.0.0",
    "babel-core": "^6.7.2",
    "babel-eslint": "^5.0.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-es2015-loose": "^7.0.0",
    "babel-preset-stage-1": "^6.5.0",
    "bundle-loader": "^0.5.4",
    "css-loader": "^0.23.1",
    "eslint": "^1.10.3",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.9.0",
    "imports-loader": "^0.6.5",
    "isomorphic-fetch": "^2.2.1",
    "jasmine-core": "^2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^0.13.21",
    "karma-babel-preprocessor": "^6.0.1",
    "karma-chrome-launcher": "^0.2.2",
    "karma-jasmine": "^0.3.7",
    "karma-webpack": "^1.7.0",
    "less": "^2.6.1",
    "less-loader": "^2.2.3",
    "protractor": "^3.2.1",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

/*eslint-disable no-var*/
var path = require('path');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');

module.exports = {
  devServer: {
    host: 'localhost',
    port: 3000
  },
  entry: {
    main: [
      './src/main'
    ]
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  plugins: [
    new AureliaWebpackPlugin({
      includeSubModules: [
        { moduleId: "aurelia-i18n" },
        { moduleId: "aurelia-dialog" },
        { moduleId: "aurelia-validation" }
      ]
    }),
    new ProvidePlugin({
      Promise: 'bluebird',
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ],
  resolve: {
    root: path.resolve('./src'),
    alias: {
      "aurelia-validation/strategies":"aurelia-validation/dist/commonjs/strategies"
    }
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel', exclude: /node_modules|local_packages/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
      //{ test: /aurelia-dialog\/dist\/commonjs\/dialog\.css/, loader: 'raw'},
      //{ test: /\.css$/, exclude: /aurelia-dialog\/dist\/commonjs\/dialog\.css/, loader: 'style!css' },
      { test: /aurelia-dialog(\\|\/)dist(\\|\/)commonjs(\\|\/)dialog\.css/, loader: 'raw' }, // regex for windows and *nix
      { test: /\.css$/, exclude: /aurelia-dialog(\\|\/)dist(\\|\/)commonjs(\\|\/)dialog\.css/, loader: 'style!css' }, // regex for windows and *nix
      { test: /\.less$/, loader: "style!css!less"},
      { test: /\.html$/, loader: 'html' },
      { test: /\.(png|gif|jpg)$/, loader: 'url?limit=8192' },
      { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff2' },
      { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file' }
    ]
  }
};

webpack.prod.config.js

/*eslint-disable no-var*/
var webpack = require("webpack");
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var pkg = require('./package.json');

var outputFileTemplateSuffix = '-' + pkg.version;

module.exports = {
  entry: {
    main: [
      './src/main'
    ],
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]' + outputFileTemplateSuffix + '.js',
    chunkFilename: '[id]' + outputFileTemplateSuffix + '.js'
  },
  plugins: [
    new AureliaWebpackPlugin({
      includeSubModules: [
        { moduleId: "aurelia-i18n" },
        { moduleId: "aurelia-dialog" },
        { moduleId: "aurelia-validation" }
      ]
    }),
    new HtmlWebpackPlugin({
      template: 'index.prod.html',
      filename: 'index.html',
      favicon: 'assets/images/sp_favicon.ico'
    }),
    new ProvidePlugin({
      Promise: 'bluebird',
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ],
  resolve: {
    root: [
      path.resolve('./'), path.resolve('./src')
    ],
    alias: {
      "aurelia-validation/strategies":"aurelia-validation/dist/commonjs/strategies"
    }
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
      //{ test: /aurelia-dialog\/dist\/commonjs\/dialog\.css/, loader: 'raw'},
      //{ test: /\.css$/, exclude: /aurelia-dialog\/dist\/commonjs\/dialog\.css/, loader: 'style!css' },
      { test: /aurelia-dialog(\\|\/)dist(\\|\/)commonjs(\\|\/)dialog\.css/, loader: 'raw' }, // regex for windows and *nix
      { test: /\.css$/, exclude: /aurelia-dialog(\\|\/)dist(\\|\/)commonjs(\\|\/)dialog\.css/, loader: 'style!css' }, // regex for windows and *nix
      { test: /\.less$/, loader: "style!css!less"},
      { test: /\.html$/, loader: 'html' },
      { test: /\.(png|gif|jpg)$/, loader: 'url?limit=8192' },
      { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff2' },
      { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file' }
    ]
  }
};

Error: Cannot find module "bundle!json!../locales"(…). I don't really know how to solve this. it doesn't load my translation.json files.

I didn't npm install the bundle and json loader. Thanks for the great example!