feat: support absolute URLs and DataURI

src/index.js

@@ -24,9 +24,23 @@ export default async function loader(content) {
  const imports = [];
  const replacements = [];
 
+ let isSupportAbsoluteURL = false;
+
+ // TODO enable by default in the next major release
+ if (
+ this._compilation &&
+ this._compilation.options &&
+ this._compilation.options.experiments &&
+ this._compilation.options.experiments.buildHttp
+ ) {
+ isSupportAbsoluteURL = true;
+ }
+
  if (options.sources) {
  plugins.push(
  sourcesPlugin({
+ isSupportAbsoluteURL,
+ isSupportDataURL: options.esModule,
  sources: options.sources,
  resourcePath: this.resourcePath,
  context: this.context,

src/plugins/sources-plugin.js

@@ -98,6 +98,8 @@ export default (options) =>
  attributeStartOffset: sourceCodeLocation.attrs[name].startOffset,
  attributeEndOffset: sourceCodeLocation.attrs[name].endOffset,
  value: attribute.value,
+ isSupportAbsoluteURL: options.isSupportAbsoluteURL,
+ isSupportDataURL: options.isSupportDataURL,
  isValueQuoted,
  valueEndOffset,
  valueStartOffset,

src/utils.js

@@ -378,7 +378,15 @@ export function parseSrc(input) {
 
 const WINDOWS_ABS_PATH_REGEXP = /^[a-zA-Z]:[\\/]|^\\\\/;
 
-export function isUrlRequestable(url) {
+function isDataUrl(url) {
+ if (/^data:/i.test(url)) {
+ return true;
+ }
+
+ return false;
+}
+
+export function isURLRequestable(url, options = {}) {
  // Protocol-relative URLs
  if (/^\/\//.test(url)) {
  return false;
@@ -389,8 +397,26 @@ export function isUrlRequestable(url) {
  return true;
  }
 
+ if (isDataUrl(url) && options.isSupportDataURL) {
+ try {
+ decodeURIComponent(url);
+ } catch (ignoreError) {
+ return false;
+ }
+
+ return true;
+ }
+
+ if (/^file:/i.test(url)) {
+ return true;
+ }
+
  // Absolute URLs
  if (/^[a-z][a-z0-9+.-]*:/i.test(url) && !WINDOWS_ABS_PATH_REGEXP.test(url)) {
+ if (/^https?:/i.test(url)) {
+ return options.isSupportAbsoluteURL;
+ }
+
  return false;
  }
 
@@ -483,7 +509,7 @@ export function requestify(context, request) {
  return newRequest;
  }
 
- if (/^file:/i.test(newRequest)) {
+ if (/^[a-z]+:/i.test(newRequest)) {
  return newRequest;
  }
 
@@ -710,7 +736,12 @@ export function srcType(options) {
  );
  }
 
- if (!isUrlRequestable(source.value)) {
+ if (
+ !isURLRequestable(source.value, {
+ isSupportDataURL: options.isSupportDataURL,
+ isSupportAbsoluteURL: options.isSupportAbsoluteURL,
+ })
+ ) {
  return [];
  }
 
@@ -750,7 +781,12 @@ export function srcsetType(options) {
  );
  }
 
- if (!isUrlRequestable(source.value)) {
+ if (
+ !isURLRequestable(source.value, {
+ isSupportDataURL: options.isSupportDataURL,
+ isSupportAbsoluteURL: options.isSupportAbsoluteURL,
+ })
+ ) {
  return false;
  }
 
@@ -832,53 +868,6 @@ function metaContentType(options) {
  return srcType(options);
 }
 
-// function webpackImportType(options) {
-// let source;
-//
-// try {
-// source = trimASCIIWhitespace(options.value);
-// } catch (error) {
-// throw new HtmlSourceError(
-// `Bad value for attribute "${options.attribute}" on element "${options.tag}": ${error.message}`,
-// options.attributeStartOffset,
-// options.attributeEndOffset,
-// options.html
-// );
-// }
-//
-// try {
-// source = c0ControlCodesExclude(source);
-// } catch (error) {
-// throw new HtmlSourceError(
-// `Bad value for attribute "${options.attribute}" on element "${options.tag}": ${error.message}`,
-// options.attributeStartOffset,
-// options.attributeEndOffset,
-// options.html
-// );
-// }
-//
-// if (!isUrlRequestable(source.value)) {
-// return [];
-// }
-//
-// const { startOffset } = options.startTag;
-// let { endOffset } = options.startTag;
-//
-// if (options.endTag) {
-// ({ endOffset } = options.endTag);
-// }
-//
-// return [
-// {
-// format: 'import',
-// runtime: false,
-// value: source.value,
-// startOffset,
-// endOffset,
-// },
-// ];
-// }
-
 const defaultSources = new Map([
  [
  "audio",

test/fixtures/simple.html

@@ -98,7 +98,7 @@ <h2>An Ordered HTML List</h2>
  <input type="image" src="image.png" alt="Submit">
 </form>
 
-<script src="https://domain.org/script.js"></script>
+<script src="https://github.com/webpack-contrib/css-loader/blob/master/src/index.js"></script>
 
 <audio controls>
  <source src="example.ogg" type="audio/ogg">
@@ -452,3 +452,5 @@ <h2>An Ordered HTML List</h2>
 <noscript>
  <img src="./noscript.png" alt="noscript content" />
 </noscript>
+
+<img src="https://raw.githubusercontent.com/webpack-contrib/html-loader/master/test/fixtures/image.png">

test/loader.test.js

@@ -218,4 +218,31 @@ describe("loader", () => {
  expect(getWarnings(stats)).toMatchSnapshot("warnings");
  expect(getErrors(stats)).toMatchSnapshot("errors");
  });
+
+ it("should work with `experiments.buildHttp`", async () => {
+ const compiler = getCompiler(
+ "simple.js",
+ {},
+ {
+ experiments: {
+ buildHttp: {
+ allowedUris: [() => true],
+ lockfileLocation: path.resolve(
+ __dirname,
+ "./lock-files/url/lock.json",
+ ),
+ cacheLocation: path.resolve(__dirname, "./lock-files/url"),
+ },
+ },
+ },
+ );
+ const stats = await compile(compiler);
+
+ expect(getModuleSource("./simple.html", stats)).toMatchSnapshot("module");
+ expect(
+ execute(readAsset("main.bundle.js", compiler, stats)),
+ ).toMatchSnapshot("result");
+ expect(getWarnings(stats)).toMatchSnapshot("warnings");
+ expect(getErrors(stats)).toMatchSnapshot("errors");
+ });
 });

test/lock-files/url/lock.json

@@ -0,0 +1,11 @@
+{
+ "https://github.com/webpack-contrib/css-loader/blob/master/src/index.js": {
+ "integrity": "sha512-1wkV5mn4eBNNjlMgq1+MyEUf8ucfKfJBsq+0oZelJZ7Y5L/ksHDSBojxLj6YbgrWNQfWfp3/SxCYLd/jS+u17g==",
+ "contentType": "text/html; charset=utf-8"
+ },
+ "https://raw.githubusercontent.com/webpack-contrib/html-loader/master/test/fixtures/image.png": {
+ "integrity": "sha512-bHqIPBYwzPsVLYcTDqJzwgvIaxLjmezufiCVXAMI0Naelf3eWVdydMA40hXbSuB0dZCGjCepuGaI7Ze8kLM+Ew==",
+ "contentType": "image/png"
+ },
+ "version": 1
+}