- 
+ 
HTML Loader
-Exports HTML as string. HTML is minimized when the compiler demands.
+
Exports HTML as `{String}` or template `{Function}`
-
+
Exports HTML as string. HTML is minimized when the compiler demands.
+
Exports HTML as `{String}` or template `{Function}`
` is required (`require('./image.png')`). You may need to specify loaders for images in your configuration (recommended `file-loader` or `url-loader`).
+By default all assets (`
`) are transpiled to their own module requests (`import HTML__URL__O from './image.png'`) to be correctly handled by `webpack` as an ES Module
-You can specify which tag-attribute combination should be processed by this loader via the query parameter `attrs`. Pass an array or a space-separated list of `
-```
-```js
-require("html-loader!./file.html");
+'
-```
+|Name|Type|Default|Description|
+|:--:|:--:|:-----:|:----------|
+|**[`url`](#url)**|`{Boolean}`|`true`| Enable/Disable HTML Assets (`
`)|
+|**[`import`](#import)** |`{Boolean}`|`true`| Enable/Disable HTML Imports (`'
+**webpack.config.js**
+```js
+{
+ loader: 'html-loader',
+ options: {
+ url: // TODO add URL filter method (#158 && #159)
+ }
+}
```
-```js
-require("html-loader?attrs=img:src img:data-src!./file.html");
-require("html-loader?attrs[]=img:src&attrs[]=img:data-src!./file.html");
+### `import`
-// => '
'
+**import.html**
+```html
+'
+**webpack.config.js**
+```js
+{
+ loader: 'html-loader',
+ options: {
+ import: // TODO add URL filter method (#158)
+ }
+}
```
-minimized by running `webpack --optimize-minimize`
+### `template`
+
+#### `{Boolean}`
+**file.html**
```html
-'
'
+${ _.txt }
+
+**file.html**
+```html
+${ $.txt }
+'
+document.body.innerHTML = html
```
+**webpack.config.js**
```js
-require("html-loader?root=.!./file.html");
-
-// => '
'
+{
+ loader: 'html-loader',
+ options: {
+ template: '$'
+ }
+}
```
-### Interpolation
+### `minimize`
-You can use `interpolate` flag to enable interpolation syntax for ES6 template strings, like so:
+#### `{Boolean}`
+**webpack.config.js**
```js
-require("html-loader?interpolate!./file.html");
+{
+ loader: 'html-loader',
+ options: {
+ minimize: true
+ }
+}
```
-```html
-})
+#### `{Object}`
-
+**component.js**
+```js
+import template from "./component.html";
-
+ // => import HTML__URL__${idx} from './file.png';
+ if (urls) {
+ urls = Object.keys(urls)
+ .map(url => `import ${url} from '${urls[url]}';`)
+ .join('\n');
+ }
+ // Hello world!
\\";"`; - -exports[`HTML Loader Should not remove attributes by default 1`] = `"export default \\"\\";"`; - -exports[`HTML Loader Should process HTML with defaults 1`] = `"export default \\"\\\\n\\\\n\\\\n \\\\n![](\\\\\\"require('\\\\\\"./\\\\\\\\\\\\\\"\${require(./image.png)}\\\\\\\\\\\\\\"\\\\\\"')\\\\\\")
\\\\n| ;\\");"`;
-
-exports[`HTML Loader Should process HTML with options.interpolate {String} 1`] = `"throw new Error(\\"Module parse failed: /Users/Cini/Github/Webpack/webpack-loaders/html-loader/src/cjs.js??ref--0-0!/Users/Cini/Github/Webpack/webpack-loaders/html-loader/test/fixtures/interpolate.html Unexpected token (1:26)\\\\nYou may need an appropriate loader to handle this file type.\\\\n| export default \\\\\\"\\\\\\\\n\\\\\\";\\");"`;
-
-exports[`HTML Loader Should process HTML with options.minimize {Boolean} 1`] = `"export default \\" ![](\\\\\\"require('\\\\\\"./\\\\\\\\\\\\\\"./image.png\\\\\\\\\\\\\\"\\\\\\"')\\\\\\")
\\\\\\\\n\\\\\\";\\");"`;
+exports[`Loader Defaults 1`] = `
+"// HTML URLs
+import HTML__URL__0 from './file.png';
+
+// HTML Imports
+import HTML__IMPORT__0 from './file.html';
+
+// HTML
+export default \`
+
+
+
+ 
', ["image.png", "image2.png"]);
- test("single-quotes", "Text ", ["image.png", "image2.png"]);
- test("whitespace", 'T ex t ', ["image.png"]);
- test("wrong >", 'Text >', ["image.png"]);
- test("no quot", '', ["image.png"]);
- test("first tag", '', ["image.png"]);
- test("comment", '', []);
- test("comment2", '', []);
- test("comment3", '-->', []);
- test("comment4", '-->', ["image.png"]);
- test("tags", '', ["image.png", "style.css"]);
- test("cdata", ']]>', ["image2.png"]);
- test("doctype", '', ["image.png"]);
- test("alphanumeric", '', ["video.mp4"]);
- test("use", '', ["vector.svg"]);
-});
-
-describe.skip("Locations", () => {
- it("should report correct locations", () => {
- attrs('', () => true).toEqual(
- [{
- start: 12,
- length: 9,
- value: "image.png"
- }]
- );
- });
-});
diff --git a/test/e2e/__snapshots__/html.test.js.snap b/test/e2e/__snapshots__/html.test.js.snap
new file mode 100644
index 00000000..8314dbd6
--- /dev/null
+++ b/test/e2e/__snapshots__/html.test.js.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`E2E HTML 1`] = `
+"![](\\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\")
+
+
+
+
diff --git a/test/fixtures/error.js b/test/fixtures/error.js
new file mode 100644
index 00000000..1e87a0d2
--- /dev/null
+++ b/test/fixtures/error.js
@@ -0,0 +1,3 @@
+import html from './fixture.html';
+
+export default html;
diff --git a/test/fixtures/index.html b/test/fixtures/fixture.html
similarity index 53%
rename from test/fixtures/index.html
rename to test/fixtures/fixture.html
index 1795ea31..fc82db31 100644
--- a/test/fixtures/index.html
+++ b/test/fixtures/fixture.html
@@ -5,7 +5,11 @@