Create tiled-loader for webpack v4

[kamranayub]

Context

Using excalibur-tiled within webpack can be a pain because it requires map and image files to be statically hosted, or adding .json as a file-loader module rule. See this branch: https://github.com/excaliburjs/example-ts-webpack/blob/feature/excalibur-tiled-with-webpack/webpack.config.js#L31

You can use output.publicPath with a static folder but this doesn't work as well when using webpack-dev-server because it's not as out-of-the-box as something like Parcel or create-react-app.

Proposal

Ideally I'd like to do:

webpack.config.js

module: {
  rules: [
    {
      test: /map\.json$/,
      use: 'tiled-loader'
    }
  ]
}

game.js

import { TiledResource } from '@excaliburjs/excalibur-tiled';
import map from './maps/level1.map.json'; // returns the static asset path

const mapResource = new TiledResource(map /* /<hash>.json */);

And it would "just work" by delegating to file-loader internally, being able to resolve the tileset image and ensure the JSON and images are statically output.

[eonarheim]

Can this be handled with a raw loader?

[eonarheim]

Closing for now