-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add some docs
- Loading branch information
Showing
4 changed files
with
85 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
# The template option | ||
|
||
## History | ||
|
||
The version 2.x which was introduced last year (Sep, 2015) changed the way the template is processed. | ||
Instead of forcing all users to use the [blueimp](https://github.com/blueimp/JavaScript-Templates) template engine it allowed to use any webpack loader: | ||
|
||
* [jade/pug](https://github.com/pugjs/pug-loader) | ||
* [ejs](https://github.com/okonet/ejs-loader) | ||
* [underscore](https://github.com/emaphp/underscore-template-loader) | ||
* [handlebars](https://github.com/pcardune/handlebars-loader) | ||
* [html-loader](https://github.com/webpack/html-loader) | ||
* ... | ||
|
||
Under the hood it is using a webpack child compilation which inherits all loaders from | ||
your main configuration. | ||
|
||
There are two ways to set the loader: | ||
|
||
## 1) Don't set any loader | ||
|
||
By default (if you don't specify any loader in any way) a [fallback ejs loader](https://github.com/ampedandwired/html-webpack-plugin/blob/master/lib/loader.js) kicks in. | ||
|
||
## 2) Setting a loader directly for the template | ||
|
||
```js | ||
new HtmlWebpackPlugin({ | ||
// For details on `!!` see https://webpack.github.io/docs/loaders.html#loader-order | ||
template: '!!handlebars!src/index.hbs' | ||
}) | ||
``` | ||
|
||
## 3) Setting a loader using the `module.loaders` syntax | ||
|
||
```js | ||
{ | ||
module: { | ||
loaders: [ | ||
{ | ||
test: /\.hbs$/, | ||
loader: 'handlebars' | ||
}, | ||
}, | ||
plugins: [ | ||
new HtmlWebpackPlugin({ | ||
template: 'src/index.hbs' | ||
}) | ||
] | ||
} | ||
``` | ||
|
||
However this also means that in the following example webpack will use the html loader for your template. | ||
This will causes html minification and disables the fallback loader which allows to use `ejs` syntax: | ||
|
||
```js | ||
{ | ||
module: { | ||
loaders: [ | ||
{ | ||
test: /\.html$/, | ||
loader: 'html' | ||
}, | ||
}, | ||
plugins: [ | ||
new HtmlWebpackPlugin({ | ||
template: 'src/index.html' | ||
}) | ||
] | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters