@webpack-utilities/loader v1.0.0-alpha.0

npm i -D @webpack-utilities/loader

Loader

loader.js

import { getOptions, resource } from '@webpack-utilities/loader'

function loader (src, map, meta) {
  const options = getOptions(this)

  if (options.name) {
    const name = resource.getName(this, options.name, { content: src })
  }

  // ...
}

export default loader

Pitching Loader

loader.js

import { request } from '@webpack-utilities/loader'

function loader () {}

function pitch (req) {
  const remaining = request.getRemaining(req)

  // ...
}

export { pitch }
export default loader

getOptions(this)

Recommended way to retrieve the options of a loader invocation

loader.js

const { getOptions } = require('@webpack-utilities/loader')

function loader () {
  const options = Object.assign({}, getOptions(this))
}

⚠️ The returned options object is read-only. It may be re-used across multiple invocations. If you pass it on to another library, make sure to make a (deep) copy of it e.g

const { getOptions } = require('@webpack-utilities/loader')

const DEFAULTS = {}

function loader () {
  const options = Object.assign({}, DEFAULTS, getOptions(this))
}

resource

resource.getName(this, name, options)

Interpolates a filename template using multiple placeholders and/or a regular expression. The template and regular expression are set as query params called name and regExp on the current loader's context (this)

const name = resource.getName(this, name, options)

Placeholders

The following placeholders are replaced in the name parameter

[ext]

this.resourcePath = "/app/js/javascript.js"

resource.getName(this, 'js/file.[ext]', { content })

js/file.js

[name]

this.resourcePath = '/app/page.html'

resource.getName(this, '[name].js', { content })

page.js

[path]

this.resourcePath = '/app/page.html'

resource.getName(this, '[path]/file.js', { content })

/app/file.js

[hash]

this.resourcePath = "/app/file.txt"

resource.getName(this, '[hash]', { content })

c31e9820

[N]

this.resourcePath = "/app/js/page-home.js"

resource.getName(this, "script-[1]", { regExp: "page-(.*)\\.js", content })

script-home.js

resource.getHash(src, type, digest, length)

const hash = resource.getHash(src, type, digest, length)

Hashes

[<type>:hash:<digest>:<length>] optionally you can configure

Use sha512 hash instead of md4 with only 7 chars of the base64 encoded contents

this.resourcePath = "/app/file.txt"

resource.getName(this, '[sha512:hash:base64:7]', { content })

2BKDTjl

resource.parseQuery(this.resourceQuery)

Parses a {String} (e.g. loader.resourceQuery) as a query string, and returns an {Object}

./file.ext?param=value

const params = resource.parseQuery(this.resourceQuery)

if (params.param === "value") {
  // Handle value
}

Query Strings

If the loader options have been passed as loader query string (loader?some&params), the {String} is parsed by using parseQuery in the following way

request

request.from(url)

Converts a resource URL to a webpack module request

const url = 'path/to/module.js'
const req = request.from(url)

"./path/to/module.js"

Module URLs

Any URL containing a ~ will be interpreted as a module request. Anything after the ~ will be considered the request path.

'~path/to/module.js'

const url = '~path/to/module.js'
const req = request.from(url)

"path/to/module.js"

Relative URLs

URLs that are root-relative (start with /) can be resolved relative to some arbitrary path by using the root parameter.

const root = './root'

const url = '/path/to/module.js'
const req = request.from(url, root)

"./root/path/to/module.js"

To convert a root-relative URL into a module URL, specify a root value that starts with ~.

const root = '~'

const url = '/path/to/module.js'
const req = request.from(url, root)

"path/to/module.js"

request.isURL(req)

http://google.com/

const isURL = request.isURL(req)

false

request.stringify(this, url)

Turns a request into a {String} that can be used inside require() or import while avoiding absolute paths.

⚠️ Use it instead of JSON.stringify(...) if you're generating code inside a loader

Why is this necessary? Since webpack calculates the hash before module paths are translated into module ids, we must avoid absolute paths to ensure consistent hashes across different compilations.

const { getOptions, request } = require(@webpack-utilities/loader)

function loader (src) {
  const options = Object.assign({}, getOptions(this))

  if (options.urls) {
    const imports = options.urls
      .map((url, idx) => `import URL__${idx} from ${request.stringify(url)};`)
      .join('\n')
  }

  return `
    ${imports}

    export default ${src}
  `
}

request.getCurrent(req)

const { request } = require('@webpack-utilities/loader')

function loader () {}

function pitch (req) {
  const current = request.getCurrent(req)
} 

request.getRemaining(req)

const { request } = require('@webpack-utilities/loader')

function loader () {}

function pitch (req) {
  const remaining = request.getRemaining(req)
}