vue-html-loader
This is a fork of html-loader with some modifications for handling Vue templates.
Config
You can config the loader's behavior by adding an html
field under vue
in your webpack config:
// webpack.config.jsmoduleexports =// ...vue:html:// all loader queries can be specified here// also, you can specify options for htmlMinifier here.
Original README below
Exports HTML as string. HTML is minimized when the compiler demands.
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
).
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
)
To completely disable tag-attribute processing (for instance, if you're handling image loading on the client side) you can pass in attrs=false
.
Usage
Examples
With this configuration:
module: loaders:test: /\.jpg$/ loader: "file-loader"test: /\.png$/ loader: "url-loader?mimetype=image/png"output:publicPath: "http://cdn.example.com/[hash]/"
<!-- fileA.html -->
;// => '<img src="http://cdn.example.com/49e...ba9f/a9f...92ca.jpg" data-src="image2x.png" >';// => '<img src="image.png" data-src="data:image/png;base64,..." >';;// => '<img src="http://cdn.example.com/49e...ba9f/a9f...92ca.jpg" data-src="data:image/png;base64,..." >';// => '<img src="image.jpg" data-src="image2x.png" >'/// minimized by running `webpack --optimize-minimize`// => '<img src=http://cdn.example.com/49e...ba9f/a9f...92ca.jpg data-src=data:image/png;base64,...>'
'Root-relative' urls
For urls that start with a /
, the default behavior is to not translate them.
If a root
query parameter is set, however, it will be prepended to the url
and then translated.
With the same configuration above:
<!-- fileB.html -->
;// => '<img src="/image.jpg">';// => '<img src="http://cdn.example.com/49e...ba9f/a9f...92ca.jpg">'
Interpolation
You can use interpolate
flag to enable interpolation syntax for ES6 template strings, like so:
require("html?interpolate!./file.html");
<img src="${require(`./images/gallery.png`)}" />
<div>${require('./partials/gallery.html')}</div>
License
MIT (http://www.opensource.org/licenses/mit-license.php)