Images

Images in webpack are treated as regular files with the option of being converted to a base64 string and inlined into HTML. Further optimizations are possible using more specialized loaders (e.g., compression). Using more advanced image transformations depends on specific application needs and image formats.

Dependencies #

npm i file-loader url-loader -D --save-exact

• url-loader - webpack loader for optional image conversion to base64 URI
• file-loader - webpack loader for importing files from JavaScript and copying to the output folder

We are using only two loaders to demonstrate a general‑purpose approach to loading images. Every image must be imported by JavaScript; this step is handled by file-loader. During compilation, images can be translated to a base64 string to be embedded within the HTML; this step is handled by url-loader.

Webpack configuration #

webpack/parts.ts #

Add one more loader to webpack/parts.ts:

//...
{
    test: /\.(png|jpg|gif|bmp)$/,
    use: [
    {
        loader: 'url-loader',
        options: {
            limit: 10000,
            name: '../img/[name].[ext]'
        }
    }]
}
//...

We are using url-loader to configure image file extensions used by the application. The following options apply:

• limit - maximum file size in bytes under which images are converted to base64. When exceeded, file-loader is used as a fallback.
• name - output file name (may include a relative path). [name] is the filename placeholder; [ext] is the extension placeholder.

Fallback loader could be specified explicitly as one of the options. In this case, all additional parameters specified under the options section will be passed through.

With this setup, all images are copied to the img folder under the output folder.

TypeScript configuration #

Images can be stored in different places within the source folder. For situations where images are stored in one folder, it is a good idea to configure an alias to refer to them within TypeScript code.

tsconfig.json #

...
"paths": {
    "@app": ["./src/app"],
    "@app/*": ["./src/app/*"],
    "@components/*": ["./src/app/components/*"],
    "@utils": ["./src/utils"],
    "@img/*": ["./assets/images/"]
}
...

Also, TypeScript is not aware of importing image files using JavaScript module import syntax by default.

src/global.d.ts #

Create src/global.d.ts file

declare module "*.png" {
    const value: string
    export default value
}

declare module "*.jpg" {
    const value: string
    export default value
}

We declared two modules with the corresponding extensions to avoid compilation errors when importing images.

Babel configuration #

To match the TypeScript configuration, update the Babel config as well.

babel.config.js #

//...
alias: {
    "@app": "./src/app",
    "@components": "./src/app/components",
    "@utils": "./src/utils",
    "@img": "./assets/images"
}
//...

Sources #

src/app/index.ts #

//...
import largeLogo from '@img/logo1.png'
import smallLogo from '@img/logo2.jpg'

//...

const largeImage = createImage(largeLogo, 'large')
largeImage.render()

const smallImage = createImage(smallLogo, 'small')
smallImage.render()
//...

Final version #

Reference implementation (opens in a new tab)