Creating Textures loaded via file loader in pixi.js

Question

Hi I set up a project using Webpack, TypeScript and fileloader.

My webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        enforce: 'pre',
        loader: 'tslint-loader',
        options: { /* Loader options go here */ }
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },      
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  },
  devtool: 'inline-source-map',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

My tsconfig.json:

{
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "compilerOptions": {
        "noImplicitAny": true,
        "removeComments": true
    },
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
        "*": [
            "node_modules/*",
            "src/types/*"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}

And my index.ts:

import * as  _ from 'lodash';
import * as PIXI from 'pixi.js';

const renderer = PIXI.autoDetectRenderer(256, 256,
    { antialias: false, transparent: false, resolution: 1 });

document.body.appendChild(renderer.view);

const stage = new PIXI.Container();

renderer.render(stage);

The above constellation renders the stage to index.html as expected.

Now I added a bs.png file to my src/images/ folder, now my project structure looks like this:

As I understand it this bs.png gets loaded as the file /dist/14145c56ece7799954586ba6f8464dbb.png. Here my trouble begin. I try to load the image as follows. First I created a custom.d.ts which includes a module declaration for loading .png files:

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

Now in index.ts I load it via import * as Image from './images/bs.png';. The resulting Image is of the type function and the output of console.log(Image) is 14145c56ece7799954586ba6f8464dbb.png. Unfortunately I am not able to load a Pixi texture like this:

const text = new PIXI.Texture(Image);

With this line I get:

src/index.ts(12,31): error TS2345: Argument of type 'typeof "*.png"' is not assignable to parameter of type 'BaseTexture'.
  Property 'touched' is missing in type 'typeof "*.png"'.

Which I understand. I also cannot use:

const texture = PIXI.utils.TextureCache[Image];

Although Image does seem to return the filepath. I tried to load the image using the filepath of the png created by webpack, still the texture remains undefined.

I am really unsure what the real problem here is. Do I need to run a server (such as express) or am I just missing something? Btw this is the output of the npm run build command using awesome-typescript-loader:

> webpack

Hash: 45f5667bd75205a328bf
Version: webpack 3.4.1
Time: 3297ms
                               Asset     Size  Chunks                    Chunk Names
14145c56ece7799954586ba6f8464dbb.png  4.07 kB          [emitted]
                           bundle.js  4.83 MB       0  [emitted]  [big]  main
  [16] (webpack)/buildin/global.js 509 bytes {0} [built]
  [37] (webpack)/buildin/module.js 517 bytes {0} [built]
  [88] ./src/index.ts 851 bytes {0} [built]
 [192] ./src/images/bs.png 82 bytes {0} [built]
    + 189 hidden modules

Creating Textures loaded via file loader in pixi.js

1 Answers