Блог

Я использую Webpack 5.20.1 с функцией модулей ресурсов.

Когда я импортирую свои ресурсы, я получаю «undefined» вместо URL ожидаемого ресурса.

webpack.config.js

 module.exports = {
  ...
  module: {
    rules: [
      {
        test: /.(gif|png|jpe?g|svg|xml|json)$/i,
        type: 'asset/resource'
      }
    ]
  },
  ...
 

MyFile.ts

 import * as Phaser from 'phaser';

import sky from '../assets/sky.png';

export class GameScene extends Phaser.Scene {

  public preload() {
    console.log("##### sky", sky); // got undefined
    this.load.image('sky', sky);
  }

}
 

Я думал, что это использование было законным.

Исследуя transpiled bundle, я нахожу применение пути к default , когда затем используется ресурс. Но нет default в экспорте, когда ресурс создается как модуль :

app.bundle.js (при использовании актива)

 Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.GameScene = void 0;
var Phaser = __webpack_require__(/*! phaser */ "./node_modules/phaser/dist/phaser.js");
var sky_png_1 = __webpack_require__(/*! ../assets/sky.png */ "./src/assets/sky.png");
var GameScene = /** @class */ (function (_super) {
    __extends(GameScene , _super);
    function GameScene () {
        var _this = _super.call(this, sceneConfig) || this;
        _this.score = 0;
        return _this;
    }
    GargoylesScene.prototype.preload = function () {
        console.log("##### sky", sky_png_1.default); // There is 'default' keyword
        this.load.image('sky', sky_png_1.default); // There is 'default' keyword
    };

    return GameScene;
}(Phaser.Scene));
exports.GameScene = GameScene;
 

app.bundle.js (при определении актива как модуля)

 /***/ "./src/assets/sky.png":
/*!****************************!*
  !*** ./src/assets/sky.png ***!
  ****************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

"use strict";
module.exports = __webpack_require__.p   "assets/47a86b192804f1490bee.png"; // There is NO 'default' keyword

/***/ }),
 

Где я ошибся?

Как я могу настроить webpack для загрузки моих ресурсов, как ожидалось?

Найдено обходное решение: используйте * при импорте ресурсов.

MyFile.ts

 import * as Phaser from 'phaser';

import * as sky from '../assets/sky.png'; // use `* as`

export class GameScene extends Phaser.Scene {

  public preload() {
    console.log("##### sky", sky); // got undefined
    this.load.image('sky', sky);
  }

}
 

будут перенесены в

app.bundle.js (при использовании актива)

 Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.GameScene = void 0;
var Phaser = __webpack_require__(/*! phaser */ "./node_modules/phaser/dist/phaser.js");
var sky = __webpack_require__(/*! ../assets/sky.png */ "./src/assets/sky.png");
var GameScene = /** @class */ (function (_super) {
    __extends(GameScene , _super);
    function GameScene () {
        var _this = _super.call(this, sceneConfig) || this;
        _this.score = 0;
        return _this;
    }
    GargoylesScene.prototype.preload = function () {
        console.log("##### sky", sky);
        this.load.image('sky', sky);
    };
    
    return GameScene;
}(Phaser.Scene));
exports.GameScene = GameScene;