For the latest stable version:
npm i -D @aurelia/webpack-loader
For our nightly builds:
npm i -D @aurelia/webpack-loader@dev
In webpack.config.js
:
module: {
rules: [
// For apps in esnext with babel
{ test: /\.js$/i, use: ['babel-loader', '@aurelia/webpack-loader'], exclude: /node_modules/ },
// For apps in TypeScript with ts-loader
{ test: /\.ts$/i, use: ['ts-loader', '@aurelia/webpack-loader'], exclude: /node_modules/ },
// For apps don't want to use ShadowDOM or CSSModule
{ test: /\.html$/i, use: '@aurelia/webpack-loader', exclude: /node_modules/ }
// For apps want to use ShadowDOM or CSSModule
// available defaultShadowOptions are { mode: 'open' }, or { mode: 'closed' }, or null (default).
// by default, option useCSSModule is false. https://github.com/css-modules/css-modules
// Normally you would not use ShadowDOM and CSSModule together, but our tooling doesn't prevent you from doing that.
{
test: /\.html$/i,
use: {
loader: '@aurelia/webpack-loader',
options: {
defaultShadowOptions: { mode: 'open' },
useCSSModule: false
}
},
exclude: /node_modules/
}
]
}
For apps in TypeScript, an extra typing definition is required for html module. You can add following file to your typing folder.
html.d.ts
declare module '*.html' {
import { IContainer } from '@aurelia/kernel';
import { BindableDefinition } from '@aurelia/runtime';
export const name: string;
export const template: string;
export default template;
export const dependencies: string[];
export const containerless: boolean | undefined;
export const bindables: Record<string, BindableDefinition>;
export const shadowOptions: { mode: 'open' | 'closed'} | undefined;
export function register(container: IContainer);
}