Webpack Dynamic File Name Resolution

webpack-dynamic-file-name-resolution.js

/*
 * Webpack config
 */

/* Use file-loader for images. */
{
    test: /\.(gif|ico|jpg|png|svg)$/,
    loader: 'file'
}

/* User file-loader for html files ending with 'async.html'. */
{
    test: /\.async\.html$/,
    loader: 'file'
}

/*
 * Your js/ts code.
 */

let logoUrl = require(`./logo-${companyId}.png`);

/* You can also customize your templates depending on some context variable.
 * In this example we suppose we are using ionic or nativescript and we want to use different templates depending on the OS. */

const os = 'ios';

@Component({
    templateUrl: require(`./my-cool-button.${os}.component.async.html`)
});