Read template file asynchronously

This commit is contained in:
Charles Blaxland 2014-08-14 20:36:15 +10:00
parent 36bf69f1a7
commit 14b1a38dfa
2 changed files with 44 additions and 24 deletions

View File

@ -21,18 +21,23 @@ HtmlWebpackPlugin.prototype.apply = function(compiler) {
templateFile = path.join(__dirname, 'default_index.html');
}
var htmlTemplateContent = fs.readFileSync(templateFile, 'utf8');
var html = tmpl(htmlTemplateContent, templateParams);
var outputFilename = self.options.filename || 'index.html';
compiler.assets[outputFilename] = {
source: function() {
return html;
},
size: function() {
return html.length;
fs.readFile(templateFile, 'utf8', function(err, htmlTemplateContent) {
if (err) {
compiler.errors.push(new Error('HtmlWebpackPlugin: Unable to read HTML template "' + templateFile + '"'));
} else {
var html = tmpl(htmlTemplateContent, templateParams);
var outputFilename = self.options.filename || 'index.html';
compiler.assets[outputFilename] = {
source: function() {
return html;
},
size: function() {
return html.length;
}
};
}
};
callback();
callback();
});
});
};

View File

@ -6,7 +6,7 @@ var HtmlWebpackPlugin = require('../index.js');
var OUTPUT_DIR = path.join(__dirname, '../dist');
function testHtmlPlugin(webpackConfig, expectedResults, done, outputFile) {
function testHtmlPlugin(webpackConfig, expectedResults, outputFile, done) {
outputFile = outputFile || 'index.html';
webpack(webpackConfig, function(err, stats) {
expect(err).toBeFalsy();
@ -37,7 +37,7 @@ describe('HtmlWebpackPlugin', function() {
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}, ['<script src="index_bundle.js"'], done);
}, ['<script src="index_bundle.js"'], null, done);
});
@ -52,7 +52,7 @@ describe('HtmlWebpackPlugin', function() {
filename: '[name]_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}, ['<script src="util_bundle.js"', '<script src="app_bundle.js"'], done);
}, ['<script src="util_bundle.js"', '<script src="app_bundle.js"'], null, done);
});
it('allows you to specify your own HTML template', function(done) {
@ -66,7 +66,7 @@ describe('HtmlWebpackPlugin', function() {
},
plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'fixtures/test.html')})]
},
['<script src="app_bundle.js"', 'Some unique text'], done);
['<script src="app_bundle.js"', 'Some unique text'], null, done);
});
it('works with source maps', function(done) {
@ -78,7 +78,7 @@ describe('HtmlWebpackPlugin', function() {
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}, ['<script src="index_bundle.js"'], done);
}, ['<script src="index_bundle.js"'], null, done);
});
it('handles hashes in bundle filenames', function(done) {
@ -89,7 +89,7 @@ describe('HtmlWebpackPlugin', function() {
filename: 'index_bundle_[hash].js'
},
plugins: [new HtmlWebpackPlugin()]
}, [/<script src="index_bundle_[0-9a-f]+\.js"/], done);
}, [/<script src="index_bundle_[0-9a-f]+\.js"/], null, done);
});
it('prepends the webpack public path to script src', function(done) {
@ -101,7 +101,7 @@ describe('HtmlWebpackPlugin', function() {
publicPath: 'http://cdn.example.com/assets/'
},
plugins: [new HtmlWebpackPlugin()]
}, ['<script src="http://cdn.example.com/assets/index_bundle.js"'], done);
}, ['<script src="http://cdn.example.com/assets/index_bundle.js"'], null, done);
});
it('handles subdirectories in the webpack output bundles', function(done) {
@ -112,7 +112,7 @@ describe('HtmlWebpackPlugin', function() {
filename: 'assets/index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}, ['<script src="assets/index_bundle.js"'], done);
}, ['<script src="assets/index_bundle.js"'], null, done);
});
it('handles subdirectories in the webpack output bundles along with a public path', function(done) {
@ -124,7 +124,7 @@ describe('HtmlWebpackPlugin', function() {
publicPath: 'http://cdn.example.com/'
},
plugins: [new HtmlWebpackPlugin()]
}, ['<script src="http://cdn.example.com/assets/index_bundle.js"'], done);
}, ['<script src="http://cdn.example.com/assets/index_bundle.js"'], null, done);
});
it('allows you to configure the title of the generated HTML page', function(done) {
@ -135,7 +135,7 @@ describe('HtmlWebpackPlugin', function() {
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin({title: 'My Cool App'})]
}, ['<title>My Cool App</title>'], done);
}, ['<title>My Cool App</title>'], null, done);
});
it('allows you to configure the output filename', function(done) {
@ -146,7 +146,7 @@ describe('HtmlWebpackPlugin', function() {
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin({filename: 'test.html'})]
}, ['<script src="index_bundle.js"'], done, 'test.html');
}, ['<script src="index_bundle.js"'], 'test.html', done);
});
it('allows you to configure the output filename with a path', function(done) {
@ -157,7 +157,7 @@ describe('HtmlWebpackPlugin', function() {
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin({filename: 'assets/test.html'})]
}, ['<script src="index_bundle.js"'], done, 'assets/test.html');
}, ['<script src="index_bundle.js"'], 'assets/test.html', done);
});
it('allows you write multiple HTML files', function(done) {
@ -174,9 +174,24 @@ describe('HtmlWebpackPlugin', function() {
template: path.join(__dirname, 'fixtures/test.html')
})
]
}, ['<script src="index_bundle.js"'], done);
}, ['<script src="index_bundle.js"'], null, done);
expect(fs.existsSync(path.join(__dirname, 'fixtures/test.html'))).toBe(true);
});
it('registers a webpack error if the template cannot be opened', function(done) {
webpack({
entry: path.join(__dirname, 'fixtures/index.js'),
output: {
path: OUTPUT_DIR,
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin({template: 'fixtures/does_not_exist.html'})]
}, function(err, stats) {
expect(stats.hasErrors()).toBe(true);
expect(stats.toJson().errors[0]).toContain('HtmlWebpackPlugin');
done();
});
});
});