loader.js

/* eslint-disable max-params */

import steed from "steed"
import loaderUtils from "loader-utils"

function resolveImageSrc(loaderContext, image, callback) {
  if (typeof image.src !== "string") {
    return callback(
      new Error('Missing image "src" property in Web App Manifest')
    )
  }


  const context = loaderContext.context
  const request = loaderUtils.urlToRequest(image.src)

  console.log("Request:", request)

  loaderContext.resolve(context, request, function (err, filename) {
    if (err) {
      return callback(err)
    }

    console.log("Filename:", filename)

    loaderContext.addDependency(filename)

    loaderContext.loadModule(filename, function (err, source, map, module) {
      if (err) {
        return callback(err)
      }

      console.log("Full Filename:", filename)
      console.log("New Source:", source)

      // How to update the source here in our JSON?
      // image.src = ???

      callback(null)
    })
  })
}

function resolveImages(loaderContext, manifest, key, callback) {
  if (!Array.isArray(manifest[key])) {
    return callback(null)
  }

  return steed.map(manifest[key], resolveImageSrc.bind(null, loaderContext), (resolveError) => {
    if (resolveError) {
      return callback(resolveError)
    }

    callback(null)
  })
}

export default function (content, map, meta) {
  if (this.cacheable) {
    this.cacheable();
  }

  const options = loaderUtils.getOptions(this)

  var callback = this.async()
  var manifest

  try {
    manifest = JSON.parse(content)
  } catch (parseError) {
    return callback(new Error("Invalid JSON in Web App Manifest"))
  }

  steed.parallel(
    [
      resolveImages.bind(null, this, manifest, "splash_screens"),
      resolveImages.bind(null, this, manifest, "icons")
    ],
    (resolveError) => {
      if (resolveError) {
        return callback(resolveError)
      }

      console.log("Result:", manifest)
      var formatted = JSON.stringify(manifest, null, 2)
      console.log("Formatted:", formatted)

      callback(null, formatted)
    }
  )
}

webpack-loader-issues.txt

node_modules/.bin/preppy && node_modules/.bin/webpack --config test/success-cases/basic/webpack.config.js
Using input src/index.js for target node
>>> Bundling app-manifest-loader-0.9.3 defined as esmodule to lib/index.esm.js...
>>> Bundling app-manifest-loader-0.9.3 defined as commonjs to lib/index.cjs.js...
Request: ./splash_1.gif
Request: ./splash_2.gif
Request: ./icon_1.gif
Request: ./icon_2.gif
Filename: /Users/swerner/Workspace/open-source/app-manifest-loader/test/success-cases/basic/splash_1.gif
Filename: /Users/swerner/Workspace/open-source/app-manifest-loader/test/success-cases/basic/splash_2.gif
Filename: /Users/swerner/Workspace/open-source/app-manifest-loader/test/success-cases/basic/icon_1.gif
Filename: /Users/swerner/Workspace/open-source/app-manifest-loader/test/success-cases/basic/icon_2.gif
Full Filename: /Users/swerner/Workspace/open-source/app-manifest-loader/test/success-cases/basic/splash_2.gif
New Source: module.exports = __webpack_public_path__ + "file-3b0NI0JF.gif";
Full Filename: /Users/swerner/Workspace/open-source/app-manifest-loader/test/success-cases/basic/splash_1.gif
New Source: module.exports = __webpack_public_path__ + "file-3b0NI0JF.gif";
Full Filename: /Users/swerner/Workspace/open-source/app-manifest-loader/test/success-cases/basic/icon_1.gif
New Source: module.exports = __webpack_public_path__ + "file-3b0NI0JF.gif";
Full Filename: /Users/swerner/Workspace/open-source/app-manifest-loader/test/success-cases/basic/icon_2.gif
New Source: module.exports = __webpack_public_path__ + "file-3b0NI0JF.gif";
Result: { name: 'Basic Test',
  splash_screens:
   [ { src: './splash_1.gif', sizes: '1920x1080', type: 'image/png' },
     { src: './splash_2.gif', sizes: '2560x1440', type: 'image/png' } ],
  icons:
   [ { src: './icon_1.gif', sizes: '192x192', type: 'image/png' },
     { src: './icon_2.gif', sizes: '256x256', type: 'image/png' } ] }
Formatted: {
  "name": "Basic Test",
  "splash_screens": [
    {
      "src": "./splash_1.gif",
      "sizes": "1920x1080",
      "type": "image/png"
    },
    {
      "src": "./splash_2.gif",
      "sizes": "2560x1440",
      "type": "image/png"
    }
  ],
  "icons": [
    {
      "src": "./icon_1.gif",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./icon_2.gif",
      "sizes": "256x256",
      "type": "image/png"
    }
  ]
}
Hash: 40a84cc56c458962405d
Version: webpack 4.6.0
Time: 221ms
Built at: 02.05.2018 15:10:36
                                Asset       Size  Chunks             Chunk Names
                    file-3b0NI0JF.gif   3.15 KiB          [emitted]
ddf702013b6e1a58a97f241158ca90e0.json  453 bytes          [emitted]
Entrypoint main =
[./icon_1.gif] 63 bytes [built]
[./icon_2.gif] 63 bytes [built]
[./index.js] 27 bytes {main} [built]
[./manifest.json] 3.05 KiB {main} [built] [failed] [1 error]
[./splash_1.gif] 63 bytes [built]
[./splash_2.gif] 63 bytes [built]

ERROR in ./manifest.json
Module parse failed: Unexpected token m in JSON at position 0
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token m in JSON at position 0
    at JSON.parse (<anonymous>)
    at JsonParser.parse (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/webpack/lib/JsonParser.js:15:21)
    at doBuild.err (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/webpack/lib/NormalModule.js:375:32)
    at runLoaders (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/webpack/lib/NormalModule.js:272:12)
    at /Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/loader-runner/lib/LoaderRunner.js:370:3
    at iterateNormalLoaders (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
    at iterateNormalLoaders (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/loader-runner/lib/LoaderRunner.js:218:10)
    at /Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/loader-runner/lib/LoaderRunner.js:233:3
    at runSyncOrAsync (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
    at iterateNormalLoaders (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/loader-runner/lib/LoaderRunner.js:218:10)
    at /Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/loader-runner/lib/LoaderRunner.js:233:3
    at context.callback (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/swerner/Workspace/open-source/app-manifest-loader/lib/index.cjs.js:76:5
    at ResultsHolder.release (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/fastparallel/parallel.js:185:9)
    at SingleCaller.release (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/fastparallel/parallel.js:157:17)
    at /Users/swerner/Workspace/open-source/app-manifest-loader/lib/index.cjs.js:49:5
    at ResultsHolder.release (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/fastparallel/parallel.js:185:9)
    at SingleCaller.release (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/fastparallel/parallel.js:157:17)
    at /Users/swerner/Workspace/open-source/app-manifest-loader/lib/index.cjs.js:34:7
    at compilation.semaphore.acquire (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/webpack/lib/dependencies/LoaderPlugin.js:83:17)
    at Semaphore.acquire (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/webpack/lib/util/Semaphore.js:17:4)
    at compilation.addModuleDependencies.err (/Users/swerner/Workspace/open-source/app-manifest-loader/node_modules/webpack/lib/dependencies/LoaderPlugin.js:52:31)
    at process._tickCallback (internal/process/next_tick.js:172:11)
 @ ./index.js 1:0-26

ERROR in chunk main [entry]
index.js
Cannot read property 'replace' of undefined

webpack.config.js

module.exports = {
  entry: {
    main: `${__dirname}/index.js`
  },

  context: __dirname,
  mode: "development",

  output: {
    filename: "index.js",
    path: `${__dirname}/actual-output`
  },

  module: {
    rules: [
      {
        test: /manifest.json$/,
        use: [
          {
            loader: "file-loader"
          },
          {
            loader: "../../../lib/index.cjs.js"
          }
        ]
      },
      {
        test: /.gif$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "file-[hash:base62:8].[ext]"
            }
          }
        ]
      }
    ]
  }
}