Allow user defined HTML templates

This commit is contained in:
Charles Blaxland 2014-08-12 22:16:41 +10:00
parent 7d27822455
commit c26597403c
3 changed files with 38 additions and 7 deletions

View File

@ -2,7 +2,8 @@ var fs = require('fs');
var path = require('path');
var tmpl = require('blueimp-tmpl').tmpl;
function HtmlWebpackPlugin() {
function HtmlWebpackPlugin(options) {
this.options = options || {};
}
HtmlWebpackPlugin.prototype.apply = function(compiler) {
@ -13,8 +14,12 @@ HtmlWebpackPlugin.prototype.apply = function(compiler) {
templateParams.webpack = webpackStatsJson;
templateParams.htmlWebpackPlugin = self.htmlWebpackPluginJson(webpackStatsJson);
var htmlTemplate = fs.readFileSync(path.join(__dirname, 'default_index.html'), 'utf8');
fs.writeFileSync(path.join(compiler.options.output.path, 'index.html'), tmpl(htmlTemplate, templateParams));
var templateFile = self.options.template;
if (!templateFile) {
templateFile = path.join(__dirname, 'default_index.html');
}
var htmlTemplateContent = fs.readFileSync(templateFile, 'utf8');
fs.writeFileSync(path.join(compiler.options.output.path, 'index.html'), tmpl(htmlTemplateContent, templateParams));
});
};

View File

@ -6,9 +6,10 @@ var HtmlWebpackPlugin = require('../index.js');
var OUTPUT_DIR = path.join(__dirname, '..', 'dist');
function testHtmlPlugin(webpackConfig, expectedResults, done) {
function testHtmlPlugin(webpackConfig, htmlPluginOptions, expectedResults, done) {
var outputHtmlFile = path.join(OUTPUT_DIR, 'index.html');
webpackConfig.plugins = [new HtmlWebpackPlugin()];
var htmlPlugin = htmlPluginOptions ? new HtmlWebpackPlugin(htmlPluginOptions) : new HtmlWebpackPlugin();
webpackConfig.plugins = [htmlPlugin];
webpack(webpackConfig, function(err, stats) {
expect(err).toBeFalsy();
expect(stats.hasErrors()).toBe(false);
@ -32,7 +33,7 @@ describe('HtmlWebpackPlugin', function() {
path: OUTPUT_DIR,
filename: 'index_bundle.js'
}
}, ['<script src="index_bundle.js"'], done);
}, null, ['<script src="index_bundle.js"'], done);
});
@ -46,6 +47,20 @@ describe('HtmlWebpackPlugin', function() {
path: OUTPUT_DIR,
filename: '[name]_bundle.js'
}
}, ['<script src="util_bundle.js"', '<script src="app_bundle.js"'], done);
}, null, ['<script src="util_bundle.js"', '<script src="app_bundle.js"'], done);
});
it('allows you to specify your own HTML template', function(done) {
testHtmlPlugin({
entry: {
app: path.join(__dirname, 'fixtures', 'index.js')
},
output: {
path: OUTPUT_DIR,
filename: '[name]_bundle.js'
}
},
{template: path.join(__dirname, 'fixtures', 'test.html')},
['<script src="app_bundle.js"', 'Some unique text'], done);
});
});

11
spec/fixtures/test.html vendored Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>React Starter</title>
</head>
<body>
<p>Some unique text</p>
<script src="{%=o.htmlWebpackPlugin.assets.app%}"></script>
</body>
</html>