pixi.jsのファイルローダー経由でテクスチャをロードする

Question

こんにちは、Webpack、TypeScript、fileloaderを使ってプロジェクトをセットアップしました。マイ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') 
    } 
}; 

マイ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" 
    ] 
} 

そして、私の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); 

予想通り上記の星座がindex.htmlに舞台をレンダリングします。私はこのbs.pngがファイル/dist/14145c56ece7799954586ba6f8464dbb.pngとしてロードされることを理解したよう

：

は今、私は今、私のプロジェクトの構造は次のようになり、私のsrc/images/フォルダにbs.pngファイルを追加しました。ここで私のトラブルが始まります。私は次のように画像をロードしようとします。私はimport * as Image from './images/bs.png';を経由して、それをロードindex.tsで今

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

：まず私はロード.pngファイル用のモジュール宣言を含むcustom.d.tsを作成しました。結果のImageはtype関数であり、console.log（Image）の出力は14145c56ece7799954586ba6f8464dbb.pngです。残念ながら、私はこのようなピクシーテクスチャをロードすることはできませんよ。このラインで

const text = new PIXI.Texture(Image); 

私が手に：私は理解して

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"'. 

。私も使用できません：

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

Imageはファイルパスを返すようですが。 webpackによって作成されたpngのファイルパスを使用してイメージをロードしようとしましたが、テクスチャはまだundefinedのままです。

実際の問題は本当にわかりません。サーバーを稼働させる必要がありますか（Expressなど）、何か不足していますか？ところでこれはawesome-typescript-loaderを使用してnpm run buildコマンドの出力です：

> 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 

Answer 1

あなたがイメージのパスを持っていて、それを使用する前にそれをロードする必要があります。

PIXI.loader.add([ 
     Image, 
     "and_others_if_any.png", 
     ]) 
     .load(() => { 
      var sprite = new PIXI.Sprite(PIXI.Texture.fromImage(Image)); 

     }); 

この操作ではajaxリクエストが行われるため、これらのファイルをサーバーから提供する必要があります。あなたがLinux上にいる場合は、作業ディレクトリからpython -m SimpleHTTPServer 8000コマンドを実行することで、サービスを受けることができます。