*inline-loader.md

inline-loader for webpack

Point this loader at an empty file, and it'll let you supply fake contents for that file.

import one from 'inline-loader?filenam=one.js&code=export default 1!./empty.js';

console.log(one)  // 1

You'll find this is most useful from the context of other plugins/loaders.

Example

Here's an example implementation of "HTML Modules", where an imported HTML file is parsed and its components broken out into virtual dependencies:

// example: html-module-loader.js
const DOMParser = require('jsdom')().window.DOMParser;
module.exports = function(code) {
  const doc = new DOMParser().parseFromString(code, 'text/html');
  const template = (doc.querySelector('template') || {}).innerHTML;
  const script = (doc.querySelector('script') || {}).textContent;
  const style = (doc.querySelector('style') || {}).textContent;
  return `
    import.meta.html = require('inline-loader?${JSON.stringify({
      code: template,
      filename: this.request + '.html'
    })}!${__dirname}/empty.html');

    import.meta.style = require('inline-loader?${JSON.stringify({
      code: template,
      filename: this.request + '.css'
    })}!${__dirname}/empty.css');

    ${script}
  `;
};

inline-loader.js

import loaderUtils from 'loader-utils';

module.exports = function(source, map, data) {
	let { code, filename, cacheable } = loaderUtils.getOptions(this);

	if (cacheable===false) this.cacheable(false);

	this.resourcePath = filename;

	return code;
};