I recently switched a webpack project written in JavaScript to TypeScript. I felt lucky that almost everything still compiled just by following webpack’s TypeScript guide, though it was a small project.

Of the things that didn’t compile: an image I was importing into my index.js (now index.ts) entry file was getting ignored.

I had two problems:

  1. TypeScript told me, more or less, that it did not understand what an image file was
  2. webpack no longer processed and copied the image to my final dist directory

The bottom of webpack’s TypeScript guide has a section called, “Importing Other Assets” that addressed my first problem. I added a file in the root directory of the project that looked like this:

declare module "*.png" {
  const content: any;
  export default content;
}

On the second problem: I spent a lot of time trying to get either file-loader or url-loader to copy the image file to my final distribution directory, as it had as a JavaScript project. I considered just moving that workflow out of webpack altogether. I could have just used a script, something like cp src/img/file.png dist/img/file.png. In the end, per this Stack Overflow discussion, I used a require statement instead of import. I changed:

import favicon from './img/favicon.png';

to

const favicon = require('./img/favicon.png');