1 | # html loader for webpack
|
2 |
|
3 | Exports HTML as string. HTML is minimized when the compiler demands.
|
4 |
|
5 | By 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 |
|
7 | 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 `<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 |
|
15 | With 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
|
35 | require("html!./fileA.html");
|
36 | // => '<img src="http://cdn.example.com/49e...ba9f/a9f...92ca.jpg" data-src="image2x.png" >'
|
37 |
|
38 | require("html?attrs=img:data-src!./file.html");
|
39 | // => '<img src="image.png" data-src="data:image/png;base64,..." >'
|
40 |
|
41 | require("html?attrs=img:src img:data-src!./file.html");
|
42 | require("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 |
|
52 | For urls that start with a `/`, the default behavior is to not translate them.
|
53 | If a `root` query parameter is set, however, it will be prepended to the url
|
54 | and then translated.
|
55 |
|
56 | With the same configuration above:
|
57 | ``` html
|
58 | <!-- fileB.html -->
|
59 | <img src="/image.jpg">
|
60 | ```
|
61 |
|
62 | ``` javascript
|
63 |
|
64 | require("html!./fileB.html");
|
65 | // => '<img src="/image.jpg">'
|
66 |
|
67 | require("html?root=.!./fileB.html");
|
68 | // => '<img src="http://cdn.example.com/49e...ba9f/a9f...92ca.jpg">'
|
69 |
|
70 | ```
|
71 |
|
72 | ## License
|
73 |
|
74 | MIT (http://www.opensource.org/licenses/mit-license.php)
|