https://github.com/vuejs/vue-html-loader
html loader module for webpack
https://github.com/vuejs/vue-html-loader
Last synced: 2 months ago
JSON representation
html loader module for webpack
- Host: GitHub
- URL: https://github.com/vuejs/vue-html-loader
- Owner: vuejs
- Fork: true (webpack-contrib/html-loader)
- Created: 2015-10-01T18:34:04.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2018-01-06T15:27:22.000Z (almost 8 years ago)
- Last Synced: 2025-09-21T06:29:35.783Z (2 months ago)
- Language: JavaScript
- Size: 47.9 KB
- Stars: 76
- Watchers: 4
- Forks: 16
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DEPRECATED
This is only used by the now outdated 8.x version of vue-loader.
---
# vue-html-loader
> This is a fork of [html-loader](https://github.com/webpack/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:
``` js
// webpack.config.js
module.exports = {
// ...
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 `
` 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 `:` 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
[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
## Examples
With this configuration:
``` javascript
{
module: { loaders: [
{ test: /\.jpg$/, loader: "file-loader" },
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
]},
output: {
publicPath: "http://cdn.example.com/[hash]/"
}
}
```
``` html
```
``` javascript
require("html!./fileA.html");
// => '
'
require("html?attrs=img:data-src!./file.html");
// => ''
require("html?attrs=img:src img:data-src!./file.html");
require("html?attrs[]=img:src&attrs[]=img:data-src!./file.html");
// => ''
require("html?-attrs!./file.html");
// => ''
/// minimized by running `webpack --optimize-minimize`
// => ''
```
## '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:
``` html
```
``` javascript
require("html!./fileB.html");
// => ''
require("html?root=.!./fileB.html");
// => ''
```
## Interpolation
You can use `interpolate` flag to enable interpolation syntax for ES6 template strings, like so:
```
require("html?interpolate!./file.html");
```
```
})
${require('./partials/gallery.html')}
```
## License
MIT (http://www.opensource.org/licenses/mit-license.php)