UNPKG

2.23 kBMarkdownView Raw
1# html loader for webpack
2
3Exports HTML as string. HTML is minimized when the compiler demands.
4
5By default every local `<img src="image.png">` is required (`require("./image.png")`). You may need to specify loaders for images in your configuration (recommended `file-loader` or `url-loader`).
6
7You 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 `<tag>:<attribute>` combinations. (Default: `attrs=img:src`)
8
9## Usage
10
11[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
12
13## Examples
14
15With this configuration:
16
17``` javascript
18{
19 module: { loaders: [
20 { test: "\.jpg$", loader: "file-loader" },
21 { test: "\.png$", loader: "url-loader?mimetype=image/png" }
22 ]},
23 output: {
24 publicPath: "http://cdn.example.com/[hash]/"
25 }
26}
27```
28
29``` html
30<!-- fileA.html -->
31<img src="image.jpg" data-src="image2x.png" >
32```
33
34``` javascript
35require("html!./fileA.html");
36// => '<img src="http://cdn.example.com/49e...ba9f/a9f...92ca.jpg" data-src="image2x.png" >'
37
38require("html?attrs=img:data-src!./file.html");
39// => '<img src="image.png" data-src="data:image/png;base64,..." >'
40
41require("html?attrs=img:src img:data-src!./file.html");
42require("html?attrs[]=img:src&attrs[]=img:data-src!./file.html");
43// => '<img src="http://cdn.example.com/49e...ba9f/a9f...92ca.jpg" data-src="data:image/png;base64,..." >'
44
45/// minimized by running `webpack --optimize-minimize`
46// => '<img src=http://cdn.example.com/49e...ba9f/a9f...92ca.jpg data-src=data:image/png;base64,...>'
47
48```
49
50## 'Root-relative' urls
51
52For urls that start with a `/`, the default behavior is to not translate them.
53If a `root` query parameter is set, however, it will be prepended to the url
54and then translated.
55
56With the same configuration above:
57``` html
58<!-- fileB.html -->
59<img src="/image.jpg">
60```
61
62``` javascript
63
64require("html!./fileB.html");
65// => '<img src="/image.jpg">'
66
67require("html?root=.!./fileB.html");
68// => '<img src="http://cdn.example.com/49e...ba9f/a9f...92ca.jpg">'
69
70```
71
72## License
73
74MIT (http://www.opensource.org/licenses/mit-license.php)