Using Webpack with Foxx

You can use Webpack to compile your Foxx servicesthe same way you would compile any other JavaScript code.However there are a few things you will need to keep in mind.

Basic configuration

Because the ArangoDB JavaScript environment is largely compatible with Node.js,the starting point looks fairly similar:

"use strict";
module.exports = {
  mode: "production",
  target: "node",
  output: {
    libraryTarget: "commonjs2"
  },
  externals: [/^@arangodb(\/|$)/]
};

The service context

Foxx extends the module object with a special context property thatreflects the current service context.As Webpack compiles multiple modules into a single file your code willnot be able to access the real module object provided by ArangoDB.

To work around this limitation you can use the context provided by the@arangodb/locals module:

const { context } = require("@arangodb/locals");

This object is identical to module.context and can be used asa drop-in replacement:

const { context } = require("@arangodb/locals");
const createRouter = require("@arangodb/foxx/router");
const router = createRouter();
context.use(router);

Externals

By default Webpack will attempt to include any dependency your code imports.This makes it easy to use third-party modules without worrying aboutfiltering devDependenciesbut causes problems when importing modules provided by ArangoDB.

Most modules that are specific to ArangoDB or Foxx reside in the @arangodbnamespace. This makes it fairly straightforward to tell Webpack to ignorethem using the externals option:

module.exports = {
  // ...
  externals: [/^@arangodb(\/|$)/]
};

You can also use this to exclude other modules provided by ArangoDB,like the joi validation library:

module.exports = {
  // ...
  externals: [/^@arangodb(\/|$)/, "joi"]
};

Compiling scripts

As far as Webpack is concerned, scripts are additional entry points:

const path = require("path");
module.exports = {
  // ...
  context: path.resolve(__dirname, "src"),
  entry: {
    main: "./index.js",
    setup: "./scripts/setup.js"
  }
};

Note: If your scripts are sharing a lot of code with each other orthe rest of the service this can result in some overhead as the shared codewill be included in each output file. A possible solution would be toextract the shared code into a separe bundle.