TouchInstinct
/
html-webpack-plugin
301
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use lodash to solve dependency issues for the fallback loader

This commit is contained in:
Jan Nicklas 2015-06-29 16:52:50 +02:00
parent 931ed64467
commit 387ca2448a
6 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -5,7 +5,7 @@ HTML Webpack Plugin
This is a [webpack](http://webpack.github.io/) plugin that simplifies creation of HTML files to serve your
webpack bundles. This is especially useful for webpack bundles that include
a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you or supply
your own template (using [blueimp templates](https://github.com/blueimp/JavaScript-Templates)).
your own template (using lodash/ejs templates.
Installation
------------
@ -70,7 +70,7 @@ Allowed values are as follows:
- `hash`: `true | false` if `true` then append a unique webpack compilation hash to all
included scripts and css files. This is useful for cache busting.
- `chunks`: Allows you to add only some chunks (e.g. only the unit-test chunk)
- `excludeChunks`: Allows you to skip some chunks (e.g. don't add the unit-test chunk)
- `excludeChunks`: Allows you to skip some chunks (e.g. don't add the unit-test chunk)
Here's an example webpack config illustrating how to use these options:
```javascript
@ -121,7 +121,7 @@ and favicon files into the markup.
```javascript
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
title: 'Custom template',
template: 'my-index.html', // Load a custom template
inject: 'body' // Inject all scripts into the body
})
@ -153,7 +153,7 @@ plugins: [
]
```
You can use the [blueimp template](https://github.com/blueimp/JavaScript-Templates) syntax out of the box.
You can use the lodash/ejs syntax out of the box.
If the `inject` feature doesn't fit your needs and you want full control over the asset placement use the [default template](https://github.com/ampedandwired/html-webpack-plugin/blob/master/default_index.html)
as a starting point for writing your own.

2
default_index.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<title>{%=o.htmlWebpackPlugin.options.title %}</title>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>

2
index.js
View File

@ -27,7 +27,7 @@ function HtmlWebpackPlugin(options) {
}, options);
// If the template doesn't use a loader use the blueimp template loader
if(this.options.template.indexOf('!') === -1) {
this.options.template = 'blueimp-tmpl!' + path.resolve(this.options.template);
this.options.template = require.resolve('./loader.js') + '!' + path.resolve(this.options.template);
}
// Resolve template path
this.options.template = this.options.template.replace(

20
loader.js Normal file
View File

@ -0,0 +1,20 @@
var _ = require('lodash');
var loaderUtils = require('loader-utils');
module.exports = function (source) {
'use strict';
var allLoadersButThisOne = this.loaders.filter(function(loader) {
return loader.module !== module.exports;
});
// This loader shouldn't kick in if there is any other loader
if (allLoadersButThisOne.length > 0) {
return source;
}
// Use underscore for a minimalistic loader
if (this.cacheable) {
this.cacheable();
}
var options = loaderUtils.parseQuery(this.query);
var template = _.template(source, options);
return 'module.exports = ' + template;
};

2
package.json
View File

@ -42,7 +42,7 @@
},
"dependencies": {
"bluebird": "^2.9.25",
"blueimp-tmpl": "~2.5.4",
"blueimp-tmpl": "^2.5.4",
"html-minifier": "^0.7.2",
"lodash": "~3.9.3"
}

4
spec/fixtures/webpackconfig.html vendored
View File

@ -5,7 +5,7 @@
<title>Test</title>
</head>
<body>
<p>Public path is {%=o.webpackConfig.output.publicPath%}</p>
<script src="{%=o.htmlWebpackPlugin.files.chunks.app.entry%}"></script>
<p>Public path is <%= webpackConfig.output.publicPath %></p>
<script src="<%= htmlWebpackPlugin.files.chunks.app.entry %>"></script>
</body>
</html>