Generate a default index.html from a single webpack entry point

This commit is contained in:
Charles Blaxland 2014-08-12 13:01:56 +10:00
parent 4e04cebca8
commit d9d3b23c56
6 changed files with 102 additions and 25 deletions

27
.gitignore vendored
View File

@ -1,25 +1,2 @@
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# Deployed apps should consider commenting this line out:
# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
node_modules
/node_modules/
/dist/

10
default_index.html Normal file
View File

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

30
index.js Normal file
View File

@ -0,0 +1,30 @@
var fs = require('fs');
var path = require('path');
var tmpl = require('blueimp-tmpl').tmpl;
function HtmlWebpackPlugin() {
}
HtmlWebpackPlugin.prototype.htmlWebpackPluginJson = function(webpackStatsJson) {
json = {};
json.assets = {};
for (var chunk in webpackStatsJson.assetsByChunkName) {
json.assets[chunk] = webpackStatsJson.assetsByChunkName[chunk];
}
return json;
};
HtmlWebpackPlugin.prototype.apply = function(compiler) {
var self = this;
compiler.plugin('done', function(stats) {
var webpackStatsJson = stats.toJson();
var templateParams = {};
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));
});
};
module.exports = HtmlWebpackPlugin;

33
package.json Normal file
View File

@ -0,0 +1,33 @@
{
"name": "html-webpack-plugin",
"version": "0.0.0",
"description": "Generates HTML files to serve your webpack bundles",
"main": "index.js",
"scripts": {
"test": "node_modules/.bin/jshint *.js spec && node_modules/.bin/jasmine-node --captureExceptions spec"
},
"repository": {
"type": "git",
"url": "https://github.com/ampedandwired/html-webpack-plugin.git"
},
"keywords": [
"webpack",
"plugin",
"html",
"generate"
],
"author": "Charles Blaxland <charles.blaxland@gmail.com> (https://github.com/ampedandwired)",
"license": "MIT",
"bugs": {
"url": "https://github.com/ampedandwired/html-webpack-plugin/issues"
},
"homepage": "https://github.com/ampedandwired/html-webpack-plugin",
"devDependencies": {
"jasmine-node": "^1.14.5",
"jshint": "^2.5.2",
"webpack": "^1.3.3-beta1"
},
"dependencies": {
"blueimp-tmpl": "^2.5.4"
}
}

View File

@ -0,0 +1,26 @@
var path = require('path');
var fs = require('fs');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('../index.js');
describe('HtmlWebpackPlugin', function() {
it('generates a default index.html file for a single entry point', function(done) {
var outputDir = path.join(__dirname, '..', 'dist');
var outputHtmlFile = path.join(outputDir, 'index.html');
webpack({
entry: path.join(__dirname, 'fixtures', 'index.js'),
output: {
path: outputDir,
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}, function(err, stats) {
expect(err).toBeFalsy();
expect(stats.hasErrors()).toBe(false);
expect(fs.readFileSync(outputHtmlFile).toString()).toContain('<script src="index_bundle.js"');
done();
});
});
});

1
spec/fixtures/index.js vendored Normal file
View File

@ -0,0 +1 @@
document.body.textContent = "Hello world";