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

Include hash in URL within 'files' object rather than append in the template

This commit is contained in:
Charles Blaxland 2015-04-20 12:57:49 +10:00
parent cadad66359
commit 6a9d902950
3 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -195,11 +195,6 @@ template is rendered. This variable has the following attributes:
If you've set a publicPath in your webpack config this will be reflected
correctly in this assets hash.
- `htmlWebpackPlugin.querystring`: a unique compilation query string
(eg: `?6682424b6ad9eb93151b`) that can be appended to the URL of included
scripts and css for cache busting. Only set if `hash: true` is set in
the plugin options.
- `htmlWebpackPlugin.options`: the options hash that was passed to
the plugin. In addition to the options actually used by this plugin,
you can use this hash to pass arbitrary data through to your template.

6
default_index.html
View File

@ -1,15 +1,15 @@
<!DOCTYPE html>
<html{% if(o.htmlWebpackPlugin.files.manifest) { %} manifest="{%= o.htmlWebpackPlugin.files.manifest + o.htmlWebpackPlugin.querystring %}"{% } %}>
<html{% if(o.htmlWebpackPlugin.files.manifest) { %} manifest="{%= o.htmlWebpackPlugin.files.manifest %}"{% } %}>
<head>
<meta charset="UTF-8">
<title>{%=o.htmlWebpackPlugin.options.title || 'Webpack App'%}</title>
{% for (var css in o.htmlWebpackPlugin.files.css) { %}
<link href="{%=o.htmlWebpackPlugin.files.css[css] + o.htmlWebpackPlugin.querystring %}" rel="stylesheet">
<link href="{%=o.htmlWebpackPlugin.files.css[css] %}" rel="stylesheet">
{% } %}
</head>
<body>
{% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
<script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry + o.htmlWebpackPlugin.querystring %}"></script>
<script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script>
{% } %}
</body>
</html>

15
index.js
View File

@ -16,11 +16,8 @@ HtmlWebpackPlugin.prototype.apply = function(compiler) {
templateParams.webpack = webpackStatsJson;
templateParams.htmlWebpackPlugin = {};
templateParams.htmlWebpackPlugin.assets = self.htmlWebpackPluginLegacyAssets(compilation, webpackStatsJson);
templateParams.htmlWebpackPlugin.files = self.htmlWebpackPluginAssets(compilation, webpackStatsJson);
templateParams.htmlWebpackPlugin.files = self.htmlWebpackPluginAssets(compilation, webpackStatsJson, self.options.hash);
templateParams.htmlWebpackPlugin.options = self.options;
// If the hash option is true append the webpack hash to all assets
templateParams.htmlWebpackPlugin.querystring = self.options.hash ? '?' + webpackStatsJson.hash : '';
templateParams.webpackConfig = compilation.options;
var outputFilename = self.options.filename || 'index.html';
@ -69,7 +66,10 @@ HtmlWebpackPlugin.prototype.emitHtml = function(compilation, htmlTemplateContent
};
HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compilation, webpackStatsJson) {
HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compilation, webpackStatsJson, appendHash) {
var publicPath = compilation.options.output.publicPath || '';
var queryString = appendHash ? '?' + webpackStatsJson.hash : '';
var assets = {
// Will contain all js & css files by chunk
chunks: {},
@ -80,9 +80,10 @@ HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compilation, webp
// Will contain the html5 appcache manifest files if it exists
manifest: Object.keys(compilation.assets).filter(function(assetFile){
return path.extname(assetFile) === '.appcache';
}).map(function(assetFile) {
return assetFile + queryString;
})[0]
};
var publicPath = compilation.options.output.publicPath || '';
var chunks = webpackStatsJson.chunks.sort(function orderEntryLast(a, b) {
if (a.entry !== b.entry) {
@ -99,7 +100,7 @@ HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compilation, webp
// Prepend the public path to all chunk files
var chunkFiles = [].concat(chunk.files).map(function(chunkFile) {
return publicPath + chunkFile;
return publicPath + chunkFile + queryString;
});
// Webpack outputs an array for each chunk when using sourcemaps