3

嗨，我使用 Webpack、TypeScript 和文件加载器建立了一个项目。

我的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文件src/images/，现在我的项目结构如下所示：

在此处输入图像描述

据我了解，这bs.png将作为文件加载/dist/14145c56ece7799954586ba6f8464dbb.png。我的麻烦就从这里开始。我尝试按如下方式加载图像。首先，我创建了一个custom.d.ts包含用于加载.png文件的模块声明：

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

现在index.ts我通过import * as Image from './images/bs.png';. 结果Image是函数类型，console.log(Image) 的输出是14145c56ece7799954586ba6f8464dbb.png. 不幸的是，我无法像这样加载 Pixi 纹理：

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 似乎确实返回了文件路径。我尝试使用pngwebpack 创建的文件路径加载图像，但纹理仍然存在undefined。

我真的不确定这里的真正问题是什么。我需要运行服务器（例如快递）还是我只是错过了什么？顺便说一句，这是npm run build使用命令的输出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
4

1 回答 1

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从工作目录运行命令来提供服务。

于 2017-08-24T10:53:32.173 回答