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

#135 Inject css and js even if the html file is incomplete

This commit is contained in:
Jan Nicklas 2016-01-07 10:20:52 +01:00 committed by Jan Nicklas
parent 4cfef8a12c
commit 68428b583f
4 changed files with 56 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/javascript/template.js
View File

@ -2,4 +2,4 @@
var partial = require('./partial.html');
// Export a function / promise / or a string:
module.exports = '<html><head></head><body>' + new Date() + partial + '</body></html>';
module.exports = new Date() + partial;

40
index.js
View File

@ -442,8 +442,11 @@ HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, assets) {
return '<link href="' + stylePath + '" rel="stylesheet">';
});
// Injections
var htmlRegExp = /(<html[^>]*>)/i;
var head = [];
var headRegExp = /(<\/head>)/i;
var body = [];
var bodyRegExp = /(<\/body>)/i;
// If there is a favicon present, add it to the head
if (assets.favicon) {
@ -457,14 +460,37 @@ HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, assets) {
} else {
body = body.concat(scripts);
}
// Append assets to head element
html = html.replace(/(<\/head>)/i, function (match) {
return head.join('') + match;
});
// Append assets to body element
html = html.replace(/(<\/body>)/i, function (match) {
return body.join('') + match;
if (body.length) {
if(bodyRegExp.test(html)) {
// Append assets to body element
html = html.replace(bodyRegExp, function (match) {
return body.join('') + match;
});
} else {
// Append scripts to the end of the file if no <body> element exists:
html += body.join('');
}
}
if (head.length) {
// Create a head tag if none exists
if (!headRegExp.test(html)) {
if (!htmlRegExp.test(html)) {
html = '<head></head>' + html;
} else {
html = html.replace(htmlRegExp, function(match) {
return match + '<head></head>';
});
}
}
// Append assets to head element
html = html.replace(headRegExp, function (match) {
return head.join('') + match;
});
}
// Inject manifest into the opening html tag
if (assets.manifest) {
html = html.replace(/(<html[^>]*)(>)/i, function (match, start, end) {

24
spec/HtmlWebpackPluginSpec.js
View File

@ -1,6 +1,6 @@
'use strict';
// Workaround for css-loader issue
// Workaround for css-loader issue
// https://github.com/webpack/css-loader/issues/144
if (!global.Promise) {
require('es6-promise').polyfill();
@ -311,7 +311,7 @@ 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) {
@ -516,6 +516,26 @@ describe('HtmlWebpackPlugin', function() {
expect(fs.existsSync(path.join(__dirname, 'fixtures/test.html'))).toBe(true);
});
it('should inject js css files even if the html file is incomplete', function (done) {
var ExtractTextPlugin = require("extract-text-webpack-plugin");
testHtmlPlugin({
entry: path.join(__dirname, 'fixtures/theme.js'),
output: {
path: OUTPUT_DIR,
filename: 'index_bundle.js'
},
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
]
},
plugins: [
new HtmlWebpackPlugin({template: path.join(__dirname, 'fixtures/empty_html.html')}),
new ExtractTextPlugin("styles.css")
]
}, ['<link href="styles.css"', '<script src="index_bundle.js"'], null, done);
});
it('exposes the webpack configuration to templates', function(done) {
testHtmlPlugin({
entry: {

0
spec/fixtures/empty_html.html vendored Normal file
View File