How do I configure 3rd party libraries in aurelia.json file, app with webpack bundler

Question

I just created an Aurelia-CLI (v0.33.1) app with the following project configuration:

Name: Sample
Platform: Web
Bundler: Webpack
Loader: None
Transpiler: TypeScript
Markup Processor: Minimal Minification
CSS Processor: Sass
Unit Test Runner: Karma
Integration Test Runner: Protractor
Editor: Visual Studio Code

I am having a difficult time trying configure 3rd party plugins in this project as every other plugins wants me to make changes to either build.bundles.dependencies section in aurelia.json file or coreBundles.aurelia inside webpack.config.js file, while both these sections are totally missing from their respective files.

To add to the misery, au install <package_name> command fails with the message "Error: This command is only available for the Aurelia CLI Bundler"

For instance aurelia-charts:

https://github.com/SpoonX/aurelia-charts/blob/master/README.md#aureli-cli it says:

Aurelia-view-manager uses extend, array-equal and typer, so add following to the build.bundles.dependencies section of aurelia-project/aurelia.json

and

https://github.com/SpoonX/aurelia-charts/blob/master/README.md#webpack

it says:

And add aurelia-charts in the coreBundles.aurelia section of your webpack.config.js

Heres how the aurelia.json looks:

{
  "name": "sample",
  "type": "project:application",
  "bundler": {
    "id": "webpack",
    "displayName": "Webpack"
  },
  "build": {
    "options": {
      "server": "dev",
      "extractCss": "prod",
      "coverage": false
    }
  },
  "platform": {
    "id": "web",
    "displayName": "Web",
    "port": 8080,
    "hmr": false,
    "open": false,
    "output": "dist"
  },
  "loader": {
    "id": "none",
    "displayName": "None"
  },
  "transpiler": {
    "id": "typescript",
    "displayName": "TypeScript",
    "fileExtension": ".ts"
  },
  "markupProcessor": {
    "id": "minimum",
    "displayName": "Minimal Minification",
    "fileExtension": ".html"
  },
  "cssProcessor": {
    "id": "sass",
    "displayName": "Sass",
    "fileExtension": ".scss"
  },
  "editor": {
    "id": "vscode",
    "displayName": "Visual Studio Code"
  },
  "unitTestRunner": [
    {
      "id": "karma",
      "displayName": "Karma"
    }
  ],
  "integrationTestRunner": {
    "id": "protractor",
    "displayName": "Protractor"
  },
  "paths": {
    "root": "src",
    "resources": "resources",
    "elements": "resources/elements",
    "attributes": "resources/attributes",
    "valueConverters": "resources/value-converters",
    "bindingBehaviors": "resources/binding-behaviors"
  },
  "testFramework": {
    "id": "jasmine",
    "displayName": "Jasmine"
  }
}

And this is my webpack.config.js file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const project = require('./aurelia_project/aurelia.json');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const { ProvidePlugin } = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
const when = (condition, config, negativeConfig) =>
  condition ? ensureArray(config) : ensureArray(negativeConfig);

// primary config:
const title = 'Aurelia Navigation Skeleton';
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';

const cssRules = [
  { loader: 'css-loader' },
];

module.exports = ({production, server, extractCss, coverage, analyze} = {}) => ({
  resolve: {
    extensions: ['.ts', '.js'],
    modules: [srcDir, 'node_modules'],
  },
  entry: {
    app: ['aurelia-bootstrapper'],
    vendor: ['bluebird'],
  },
  mode: production ? 'production' : 'development',
  output: {
    path: outDir,
    publicPath: baseUrl,
    filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
    sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
    chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
  },
  performance: { hints: false },
  devServer: {
    contentBase: outDir,
    // serve index.html for all 404 (required for push-state)
    historyApiFallback: true
  },
  devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
  module: {
    rules: [
      // CSS required in JS/TS files should use the style-loader that auto-injects it into the website
      // only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
      {
        test: /\.css$/i,
        issuer: [{ not: [{ test: /\.html$/i }] }],
        use: extractCss ? ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: cssRules
        }) : ['style-loader', ...cssRules],
      },
      {
        test: /\.css$/i,
        issuer: [{ test: /\.html$/i }],
        // CSS required in templates cannot be extracted safely
        // because Aurelia would try to require it again in runtime
        use: cssRules
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        issuer: /\.[tj]s$/i
      },
      {
        test: /\.scss$/,
        use: ['css-loader', 'sass-loader'],
        issuer: /\.html?$/i
      },
      { test: /\.html$/i, loader: 'html-loader' },
      { test: /\.tsx?$/, loader: "ts-loader" },
      { test: /\.json$/i, loader: 'json-loader' },
      // use Bluebird as the global Promise implementation:
      { test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise' },
      // embed small images and fonts as Data Urls and larger ones as files:
      { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
      { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
      { 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' },
      ...when(coverage, {
        test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader',
        include: srcDir, exclude: [/\.{spec,test}\.[jt]s$/i],
        enforce: 'post', options: { esModules: true },
      })
    ]
  },
  plugins: [
    new AureliaPlugin(),
    new ProvidePlugin({
      'Promise': 'bluebird'
    }),
    new ModuleDependenciesPlugin({
      'aurelia-testing': [ './compile-spy', './view-spy' ]
    }),
    new HtmlWebpackPlugin({
      template: 'index.ejs',
      minify: production ? {
        removeComments: true,
        collapseWhitespace: true
      } : undefined,
      metadata: {
        // available in index.ejs //
        title, server, baseUrl
      }
    }),
    ...when(extractCss, new ExtractTextPlugin({
      filename: production ? '[contenthash].css' : '[id].css',
      allChunks: true
    })),
    ...when(production, new CopyWebpackPlugin([
      { from: 'static/favicon.ico', to: 'favicon.ico' }])),
    ...when(analyze, new BundleAnalyzerPlugin())
  ]
});

Answer 1

The only thing aurelia-cli does when you picked webpack, is "wrap" the various calls and provide some syntactic sugar over arguments and build tasks. So you can completely stop looking at aurelia.json and focus your attention to webpack.config.

With webpack, you don't need to configure your dependencies explicitly - the only things you configure are loaders and plugins to handle various file types. All you need to do is import the dependency somewhere in your application and webpack will find it and include it during build.

In that respect, any instructions you see in guides or blogs pertaining to aurelia.json - just ignore them and first try to "naively" just import the dependency somewhere. In most cases it will really just work.