Merge pull request #14 from jantimon/master
Support for .css and .manifest files and cache busting
This commit is contained in:
Charles Blaxland
commit
3097ffbfd3
|
|
@ -0,0 +1,93 @@
|
|||
{
|
||||
// From JSHint Default Configuration File
|
||||
// See http://jshint.com/docs/ for more details
|
||||
|
||||
"maxerr" : 50, // {int} Maximum error before stopping
|
||||
|
||||
// Enforcing
|
||||
"bitwise" : true, // true: Prohibit bitwise operators (&, |, ^, etc.)
|
||||
"camelcase" : false, // true: Identifiers must be in camelCase
|
||||
"curly" : true, // true: Require {} for every new block or scope
|
||||
"eqeqeq" : true, // true: Require triple equals (===) for comparison
|
||||
"forin" : false, // true: Require filtering for..in loops with obj.hasOwnProperty()
|
||||
"freeze" : true, // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
|
||||
"immed" : false, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
|
||||
"indent" : 2, // {int} Number of spaces to use for indentation
|
||||
"latedef" : false, // true: Require variables/functions to be defined before being used
|
||||
"newcap" : false, // true: Require capitalization of all constructor functions e.g. `new F()`
|
||||
"noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee`
|
||||
"noempty" : true, // true: Prohibit use of empty blocks
|
||||
"nonbsp" : true, // true: Prohibit "non-breaking whitespace" characters.
|
||||
"nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment)
|
||||
"plusplus" : false, // true: Prohibit use of `++` & `--`
|
||||
"quotmark" : false, // Quotation mark consistency:
|
||||
// false : do nothing (default)
|
||||
// true : ensure whatever is used is consistent
|
||||
// "single" : require single quotes
|
||||
// "double" : require double quotes
|
||||
"undef" : true, // true: Require all non-global variables to be declared (prevents global leaks)
|
||||
"unused" : true, // true: Require all defined variables be used
|
||||
"strict" : true, // true: Requires all functions run in ES5 Strict Mode
|
||||
"maxparams" : false, // {int} Max number of formal params allowed per function
|
||||
"maxdepth" : false, // {int} Max depth of nested blocks (within functions)
|
||||
"maxstatements" : false, // {int} Max number statements per function
|
||||
"maxcomplexity" : false, // {int} Max cyclomatic complexity per function
|
||||
"maxlen" : false, // {int} Max number of characters per line
|
||||
|
||||
// Relaxing
|
||||
"asi" : false, // true: Tolerate Automatic Semicolon Insertion (no semicolons)
|
||||
"boss" : false, // true: Tolerate assignments where comparisons would be expected
|
||||
"debug" : false, // true: Allow debugger statements e.g. browser breakpoints.
|
||||
"eqnull" : false, // true: Tolerate use of `== null`
|
||||
"es5" : false, // true: Allow ES5 syntax (ex: getters and setters)
|
||||
"esnext" : false, // true: Allow ES.next (ES6) syntax (ex: `const`)
|
||||
"moz" : false, // true: Allow Mozilla specific syntax (extends and overrides esnext features)
|
||||
// (ex: `for each`, multiple try/catch, function expression…)
|
||||
"evil" : false, // true: Tolerate use of `eval` and `new Function()`
|
||||
"expr" : false, // true: Tolerate `ExpressionStatement` as Programs
|
||||
"funcscope" : false, // true: Tolerate defining variables inside control statements
|
||||
"globalstrict" : false, // true: Allow global "use strict" (also enables 'strict')
|
||||
"iterator" : false, // true: Tolerate using the `__iterator__` property
|
||||
"lastsemic" : false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block
|
||||
"laxbreak" : false, // true: Tolerate possibly unsafe line breakings
|
||||
"laxcomma" : false, // true: Tolerate comma-first style coding
|
||||
"loopfunc" : true, // true: Tolerate functions being defined in loops
|
||||
"multistr" : false, // true: Tolerate multi-line strings
|
||||
"noyield" : false, // true: Tolerate generator functions with no yield statement in them.
|
||||
"notypeof" : false, // true: Tolerate invalid typeof operator values
|
||||
"proto" : false, // true: Tolerate using the `__proto__` property
|
||||
"scripturl" : false, // true: Tolerate script-targeted URLs
|
||||
"shadow" : false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
|
||||
"sub" : false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation
|
||||
"supernew" : false, // true: Tolerate `new function () { ... };` and `new Object;`
|
||||
"validthis" : false, // true: Tolerate using this in a non-constructor function
|
||||
|
||||
// Environments
|
||||
"browser" : true, // Web Browser (window, document, etc)
|
||||
"browserify" : false, // Browserify (node.js code in the browser)
|
||||
"couch" : false, // CouchDB
|
||||
"devel" : true, // Development/debugging (alert, confirm, etc)
|
||||
"dojo" : false, // Dojo Toolkit
|
||||
"jasmine" : false, // Jasmine
|
||||
"jquery" : false, // jQuery
|
||||
"mocha" : true, // Mocha
|
||||
"mootools" : false, // MooTools
|
||||
"node" : true, // Node.js
|
||||
"nonstandard" : false, // Widely adopted globals (escape, unescape, etc)
|
||||
"prototypejs" : false, // Prototype and Scriptaculous
|
||||
"qunit" : false, // QUnit
|
||||
"rhino" : false, // Rhino
|
||||
"shelljs" : false, // ShellJS
|
||||
"worker" : false, // Web Workers
|
||||
"wsh" : false, // Windows Scripting Host
|
||||
"yui" : false, // Yahoo User Interface
|
||||
|
||||
// Custom Globals
|
||||
"globals" : {
|
||||
// jasmine helpers
|
||||
"expect": false,
|
||||
"describe": false,
|
||||
"beforeEach": false,
|
||||
"it": false
|
||||
}
|
||||
}
|
||||
22
README.md
22
README.md
|
|
@ -113,10 +113,10 @@ HTML as well as the body. Your template might look like this:
|
|||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
||||
<title>My App</title>
|
||||
<script src="{%=o.htmlWebpackPlugin.assets.head%}"></script>
|
||||
<script src="{%=o.htmlWebpackPlugin.files.chunks.head.entry%}"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="{%=o.htmlWebpackPlugin.assets.main%}"></script>
|
||||
<script src="{%=o.htmlWebpackPlugin.files.chunks.main.entry%}"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
|
@ -153,14 +153,24 @@ Note the plugin will throw an error if you specify both `template` _and_
|
|||
The `o` variable in the template is the data that is passed in when the
|
||||
template is rendered. This variable has the following attributes:
|
||||
- `htmlWebpackPlugin`: data specific to this plugin
|
||||
- `htmlWebpackPlugin.assets`: a massaged representation of the
|
||||
- `htmlWebpackPlugin.files`: a massaged representation of the
|
||||
`assetsByChunkName` attribute of webpack's [stats](https://github.com/webpack/docs/wiki/node.js-api#stats)
|
||||
object. It contains a mapping from entry point name to the bundle filename, eg:
|
||||
```json
|
||||
"htmlWebpackPlugin": {
|
||||
"assets": {
|
||||
"head": "assets/head_bundle.js",
|
||||
"main": "assets/main_bundle.js"
|
||||
"files": {
|
||||
"css": [ "main.css" ],
|
||||
"js": [ "assets/head_bundle.js", "assets/main_bundle.js"]
|
||||
"chunks": {
|
||||
"head": {
|
||||
"entry": "assets/head_bundle.js",
|
||||
"css": [ "main.css" ]
|
||||
},
|
||||
"main": {
|
||||
"entry": "assets/main_bundle.js",
|
||||
"css": []
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html{% if(o.htmlWebpackPlugin.files.manifest) { %} manifest="{%= o.htmlWebpackPlugin.files.manifest + o.htmlWebpackPlugin.querystring %}"{% } %}>
|
||||
<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">
|
||||
{% } %}
|
||||
</head>
|
||||
<body>
|
||||
{% for (var chunk in o.htmlWebpackPlugin.assets) { %}
|
||||
<script src="{%=o.htmlWebpackPlugin.assets[chunk]%}"></script>
|
||||
{% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
|
||||
<script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry + o.htmlWebpackPlugin.querystring %}"></script>
|
||||
{% } %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
88
index.js
88
index.js
|
|
@ -1,3 +1,4 @@
|
|||
'use strict';
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var tmpl = require('blueimp-tmpl').tmpl;
|
||||
|
|
@ -8,34 +9,37 @@ function HtmlWebpackPlugin(options) {
|
|||
|
||||
HtmlWebpackPlugin.prototype.apply = function(compiler) {
|
||||
var self = this;
|
||||
compiler.plugin('emit', function(compiler, callback) {
|
||||
var webpackStatsJson = compiler.getStats().toJson();
|
||||
compiler.plugin('emit', function(compilation, callback) {
|
||||
var webpackStatsJson = compilation.getStats().toJson();
|
||||
var templateParams = {};
|
||||
templateParams.webpack = webpackStatsJson;
|
||||
templateParams.htmlWebpackPlugin = {};
|
||||
templateParams.htmlWebpackPlugin.assets = self.htmlWebpackPluginAssets(compiler, webpackStatsJson);
|
||||
templateParams.htmlWebpackPlugin.assets = self.htmlWebpackPluginLegacyAssets(compilation, webpackStatsJson);
|
||||
templateParams.htmlWebpackPlugin.files = self.htmlWebpackPluginAssets(compilation, webpackStatsJson);
|
||||
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 : '';
|
||||
|
||||
var outputFilename = self.options.filename || 'index.html';
|
||||
|
||||
if (self.options.templateContent && self.options.template) {
|
||||
compiler.errors.push(new Error('HtmlWebpackPlugin: cannot specify both template and templateContent options'));
|
||||
compilation.errors.push(new Error('HtmlWebpackPlugin: cannot specify both template and templateContent options'));
|
||||
callback();
|
||||
} else if (self.options.templateContent) {
|
||||
self.emitHtml(compiler, self.options.templateContent, templateParams, outputFilename);
|
||||
self.emitHtml(compilation, self.options.templateContent, templateParams, outputFilename);
|
||||
callback();
|
||||
} else {
|
||||
var templateFile = self.options.template;
|
||||
if (!templateFile) {
|
||||
templateFile = path.join(__dirname, 'default_index.html');
|
||||
}
|
||||
compiler.fileDependencies.push(templateFile);
|
||||
compilation.fileDependencies.push(templateFile);
|
||||
|
||||
fs.readFile(templateFile, 'utf8', function(err, htmlTemplateContent) {
|
||||
if (err) {
|
||||
compiler.errors.push(new Error('HtmlWebpackPlugin: Unable to read HTML template "' + templateFile + '"'));
|
||||
compilation.errors.push(new Error('HtmlWebpackPlugin: Unable to read HTML template "' + templateFile + '"'));
|
||||
} else {
|
||||
self.emitHtml(compiler, htmlTemplateContent, templateParams, outputFilename);
|
||||
self.emitHtml(compilation, htmlTemplateContent, templateParams, outputFilename);
|
||||
}
|
||||
callback();
|
||||
});
|
||||
|
|
@ -43,9 +47,14 @@ HtmlWebpackPlugin.prototype.apply = function(compiler) {
|
|||
});
|
||||
};
|
||||
|
||||
HtmlWebpackPlugin.prototype.emitHtml = function(compiler, htmlTemplateContent, templateParams, outputFilename) {
|
||||
var html = tmpl(htmlTemplateContent, templateParams);
|
||||
compiler.assets[outputFilename] = {
|
||||
HtmlWebpackPlugin.prototype.emitHtml = function(compilation, htmlTemplateContent, templateParams, outputFilename) {
|
||||
var html;
|
||||
try {
|
||||
html = tmpl(htmlTemplateContent, templateParams);
|
||||
} catch(e) {
|
||||
compilation.errors.push(new Error('HtmlWebpackPlugin: template error ' + e));
|
||||
}
|
||||
compilation.assets[outputFilename] = {
|
||||
source: function() {
|
||||
return html;
|
||||
},
|
||||
|
|
@ -55,24 +64,59 @@ HtmlWebpackPlugin.prototype.emitHtml = function(compiler, htmlTemplateContent, t
|
|||
};
|
||||
};
|
||||
|
||||
HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compiler, webpackStatsJson) {
|
||||
var assets = {};
|
||||
|
||||
HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function(compilation, webpackStatsJson) {
|
||||
var assets = {
|
||||
// Will contain all js & css files by chunk
|
||||
chunks: {},
|
||||
// Will contain all js files
|
||||
js: [],
|
||||
// Will contain all css files
|
||||
css: [],
|
||||
// Will contain the html5 appcache manifest files if it exists
|
||||
manifest: Object.keys(compilation.assets).filter(function(assetFile){
|
||||
return path.extname(assetFile) === '.appcache';
|
||||
})[0]
|
||||
};
|
||||
var publicPath = compilation.options.output.publicPath || '';
|
||||
|
||||
for (var chunk in webpackStatsJson.assetsByChunkName) {
|
||||
var chunkValue = webpackStatsJson.assetsByChunkName[chunk];
|
||||
assets.chunks[chunk] = {};
|
||||
|
||||
// Prepend the public path to all chunk files
|
||||
var chunkFiles = [].concat(webpackStatsJson.assetsByChunkName[chunk]).map(function(chunkFile) {
|
||||
return publicPath + chunkFile;
|
||||
});
|
||||
|
||||
// Webpack outputs an array for each chunk when using sourcemaps
|
||||
if (chunkValue instanceof Array) {
|
||||
// Is the main bundle always the first element?
|
||||
chunkValue = chunkValue[0];
|
||||
}
|
||||
// But we need only the entry file
|
||||
var entry = chunkFiles[0];
|
||||
assets.chunks[chunk].entry = entry;
|
||||
assets.js.push(entry);
|
||||
|
||||
if (compiler.options.output.publicPath) {
|
||||
chunkValue = compiler.options.output.publicPath + chunkValue;
|
||||
}
|
||||
assets[chunk] = chunkValue;
|
||||
// Gather all css files
|
||||
var css = chunkFiles.filter(function(chunkFile){
|
||||
return path.extname(chunkFile) === '.css';
|
||||
});
|
||||
assets.chunks[chunk].css = css;
|
||||
assets.css = assets.css.concat(css);
|
||||
}
|
||||
|
||||
return assets;
|
||||
};
|
||||
|
||||
/**
|
||||
* A helper to support the templates written for html-webpack-plugin <= 1.1.0
|
||||
*/
|
||||
HtmlWebpackPlugin.prototype.htmlWebpackPluginLegacyAssets = function(compilation, webpackStatsJson) {
|
||||
var assets = this.htmlWebpackPluginAssets(compilation, webpackStatsJson);
|
||||
var legacyAssets = {};
|
||||
Object.keys(assets.chunks).forEach(function(chunkName){
|
||||
legacyAssets[chunkName] = assets.chunks[chunkName].entry;
|
||||
});
|
||||
return legacyAssets;
|
||||
};
|
||||
|
||||
|
||||
|
||||
module.exports = HtmlWebpackPlugin;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"description": "Simplifies creation of HTML files to serve your webpack bundles",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "jshint *.js spec && jasmine-node --captureExceptions spec"
|
||||
"test": "jshint -c .jshintrc *.js spec && jasmine-node --captureExceptions spec"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
'use strict';
|
||||
var path = require('path');
|
||||
var fs = require('fs');
|
||||
var webpack = require('webpack');
|
||||
|
|
@ -17,7 +18,7 @@ function testHtmlPlugin(webpackConfig, expectedResults, outputFile, done) {
|
|||
if (expectedResult instanceof RegExp) {
|
||||
expect(htmlContent).toMatch(expectedResult);
|
||||
} else {
|
||||
expect(htmlContent).toContain(expectedResult);
|
||||
expect(htmlContent).toContain(expectedResult.replace('%hash%', stats.hash));
|
||||
}
|
||||
}
|
||||
done();
|
||||
|
|
@ -66,7 +67,7 @@ describe('HtmlWebpackPlugin', function() {
|
|||
},
|
||||
plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'fixtures/test.html')})]
|
||||
},
|
||||
['<script src="app_bundle.js"', 'Some unique text'], null, done);
|
||||
['<script src="app_bundle.js', 'Some unique text'], null, done);
|
||||
});
|
||||
|
||||
it('allows you to specify your own HTML template string', function(done) {
|
||||
|
|
@ -80,7 +81,35 @@ describe('HtmlWebpackPlugin', function() {
|
|||
templateContent: fs.readFileSync(path.join(__dirname, 'fixtures/test.html'), 'utf8')
|
||||
})]
|
||||
},
|
||||
['<script src="app_bundle.js"'], null, done);
|
||||
['<script src="app_bundle.js'], null, done);
|
||||
});
|
||||
|
||||
it('allows you to use the deprecated assets object', function (done) {
|
||||
testHtmlPlugin({
|
||||
entry: {
|
||||
app: path.join(__dirname, 'fixtures/index.js')
|
||||
},
|
||||
output: {
|
||||
path: OUTPUT_DIR,
|
||||
filename: '[name]_bundle.js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'fixtures/legacy.html')})]
|
||||
},
|
||||
['<script src="app_bundle.js', 'Some unique text'], null, done);
|
||||
});
|
||||
|
||||
it('allows you to use the deprecated default_index file', function (done) {
|
||||
testHtmlPlugin({
|
||||
entry: {
|
||||
app: path.join(__dirname, 'fixtures/index.js')
|
||||
},
|
||||
output: {
|
||||
path: OUTPUT_DIR,
|
||||
filename: '[name]_bundle.js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'fixtures/legacy_default_index.html')})]
|
||||
},
|
||||
['<script src="app_bundle.js'], null, done);
|
||||
});
|
||||
|
||||
it('registers a webpack error both template and template content are specified', function(done) {
|
||||
|
|
@ -121,7 +150,18 @@ describe('HtmlWebpackPlugin', function() {
|
|||
filename: 'index_bundle_[hash].js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin()]
|
||||
}, [/<script src="index_bundle_[0-9a-f]+\.js"/], null, done);
|
||||
}, [/<script src="index_bundle_[0-9a-f]+\.js/], null, done);
|
||||
});
|
||||
|
||||
it('allows to append hashes to the assets', function(done) {
|
||||
testHtmlPlugin({
|
||||
entry: path.join(__dirname, 'fixtures/index.js'),
|
||||
output: {
|
||||
path: OUTPUT_DIR,
|
||||
filename: 'index_bundle.js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin({hash: true})]
|
||||
}, ['<script src="index_bundle.js?%hash%"'], null, done);
|
||||
});
|
||||
|
||||
it('prepends the webpack public path to script src', function(done) {
|
||||
|
|
@ -194,7 +234,9 @@ describe('HtmlWebpackPlugin', function() {
|
|||
|
||||
it('allows you write multiple HTML files', function(done) {
|
||||
testHtmlPlugin({
|
||||
entry: path.join(__dirname, 'fixtures/index.js'),
|
||||
entry: {
|
||||
app: path.join(__dirname, 'fixtures/index.js')
|
||||
},
|
||||
output: {
|
||||
path: OUTPUT_DIR,
|
||||
filename: 'index_bundle.js'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
||||
<title>Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Some unique text</p>
|
||||
<script src="{%=o.htmlWebpackPlugin.assets.app%}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{%=o.htmlWebpackPlugin.options.title || 'Webpack App'%}</title>
|
||||
</head>
|
||||
<body>
|
||||
{% for (var chunk in o.htmlWebpackPlugin.assets) { %}
|
||||
<script src="{%=o.htmlWebpackPlugin.assets[chunk]%}"></script>
|
||||
{% } %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,6 +6,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Some unique text</p>
|
||||
<script src="{%=o.htmlWebpackPlugin.assets.app%}"></script>
|
||||
<script src="{%=o.htmlWebpackPlugin.files.chunks.app.entry%}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue