Aurelia Webpack Plugin

5.0.6 verified Sat Apr 25 auth: no javascript

A Webpack plugin for bundling Aurelia applications, enabling proper module resolution and runtime support. Current stable version is 5.0.6, with active development. It supports Webpack 5+ and includes TypeScript type definitions. Key differentiators include automatic dependency serialization, support for Aurelia's DI and templating, and compatibility with various Webpack features like code splitting and tree shaking. Compared to manual configuration, it simplifies setup and avoids common pitfalls with Aurelia module loading.

Common errors

error Module not found: Error: Can't resolve 'aurelia-bootstrapper' ↓

cause Missing or incorrect entry point name; aurelia-bootstrapper not installed or not in node_modules.

fix

Run 'npm install aurelia-bootstrapper' and ensure entry is 'aurelia-bootstrapper'.

error TypeError: Cannot read property 'tapAsync' of undefined ↓

cause Incompatible webpack version (e.g., using webpack 4 with plugin v5).

fix

Use aurelia-webpack-plugin v4 for webpack 4, or upgrade to webpack 5.

error The 'AureliaPlugin' is not a constructor ↓

cause Importing the module incorrectly, likely using default import instead of named.

fix

Use const { AureliaPlugin } = require('aurelia-webpack-plugin') or import { AureliaPlugin } from 'aurelia-webpack-plugin'.

Warnings

breaking Version 4.0.0 removed the runtime insertion hack for Webpack 3 and below; vendor entry points no longer have special handling. ↓

fix If using vendor entry, upgrade to a single entry or use webpack's splitChunks instead.

breaking Version 3.0.0 dropped support for Webpack 2/3; plugin only works with Webpack 4+. ↓

fix Upgrade to Webpack 4 or 5, or stick with aurelia-webpack-plugin 2.x for Webpack 2/3.

deprecated Using 'vendor' entry points is no longer recommended; use webpack's splitChunks optimization. ↓

fix Remove vendor entry and configure optimization.splitChunks in webpack config.

gotcha Plugin must be instantiated after other plugins that modify entry (e.g., HtmlWebpackPlugin) to avoid interference. ↓

fix Ensure AureliaPlugin is placed last or after entry-modifying plugins in the plugins array.

gotcha If using TypeScript, ensure 'aurelia-bootstrapper' is resolved via module aliases or include it in entry directly. ↓

fix Add 'aurelia-bootstrapper' to entry or use resolve.alias to point to node_modules.

Install

npm install aurelia-webpack-plugin

yarn add aurelia-webpack-plugin

pnpm add aurelia-webpack-plugin

Imports

AureliaPlugin
wrong
```
const AureliaPlugin = require('aurelia-webpack-plugin')
```
correct
```
import { AureliaPlugin } from 'aurelia-webpack-plugin'
```
CommonJS require works but TypeScript/ESM import is preferred. Default export is not available; use named import.

AureliaPlugin (CommonJS)

wrong

const AureliaPlugin = require('aurelia-webpack-plugin').default

correct

const { AureliaPlugin } = require('aurelia-webpack-plugin')

There is no default export. Always destructure the named export.

ModuleDependenciesPlugin

wrong

const ModuleDependenciesPlugin = require('aurelia-webpack-plugin').ModuleDependenciesPlugin

correct

import { ModuleDependenciesPlugin } from 'aurelia-webpack-plugin'

Also exported for advanced usage; same import pattern as AureliaPlugin.

Quickstart

Minimal webpack config that bundles an Aurelia app using the AureliaPlugin with bootstrapper entry.

// webpack.config.js
const { AureliaPlugin } = require('aurelia-webpack-plugin');
const path = require('path');

module.exports = {
  entry: {
    app: ['aurelia-bootstrapper']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  plugins: [
    new AureliaPlugin()
  ],
  resolve: {
    extensions: ['.ts', '.js']
  }
};