Fix to resolve path of modules

This commit is contained in:
Jan Nicklas 2015-05-18 19:03:13 +02:00 committed by Jan Nicklas
parent d82bd52e2f
commit ed8e4b290f
8 changed files with 59 additions and 65 deletions

View File

@ -1 +1,2 @@
require('./main.css');
document.body.innerHTML = 'Hello world!';

BIN
example/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

3
example/main.css Normal file
View File

@ -0,0 +1,3 @@
body {
background: snow;
}

11
example/template.html Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="logo.png">
</body>
</html>

View File

@ -1,14 +1,28 @@
var HtmlWebpackPlugin = require('..');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './example.js',
output: {
path: __dirname + "/dist",
publicPath: '/',
filename: "bundle.js"
path: __dirname + '/dist',
publicPath: '',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
{ test: /\.png$/, loader: 'file-loader' }
]
},
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackPlugin({
filename: 'html-loader.html',
template: 'html!./template.html'
}),
new HtmlWebpackPlugin({
title: 'HtmlWebpackPlugin example',
favicon: 'favicon.ico',
filename: 'index.min.html',
minify: {
removeComments: true,
collapseWhitespace: true,
@ -16,6 +30,7 @@ module.exports = {
minifyJS: true,
minifyCSS: true
}
})
}),
new ExtractTextPlugin('styles.css')
]
};

View File

@ -31,6 +31,12 @@ function HtmlWebpackPlugin(options) {
if(this.options.template.indexOf('!') === -1) {
this.options.template = 'raw!' + this.options.template;
}
// Resolve tempalte path
this.options.template = this.options.template.replace(
/(\!)(\.+\/[^\!\?]+)($|\?.+$)/,
function(match, prefix, filepath, postfix) {
return prefix + path.resolve(filepath) + postfix;
});
}
HtmlWebpackPlugin.prototype.apply = function(compiler) {
@ -47,7 +53,9 @@ HtmlWebpackPlugin.prototype.apply = function(compiler) {
// Create an additional child compiler which takes the template
// and turns it into an Node.JS html factory.
// This allows us to use loaders during the compilation
var childCompiler = compilation.createChildCompiler('html-webpack-plugin', outputOptions);
var compilerName = 'html-webpack-plugin for "' + path.basename(outputOptions.filename) + '"';
var childCompiler = compilation.createChildCompiler(compilerName, outputOptions);
// Inherit the loader configuration
childCompiler.apply(new NodeTemplatePlugin(outputOptions));
childCompiler.apply(new LibraryTemplatePlugin('result', 'var'));
childCompiler.apply(new NodeTargetPlugin());
@ -106,7 +114,12 @@ HtmlWebpackPlugin.prototype.evaluateCompilationResult = function(compilationResu
// Strip the leading 'var '
var source = compilationResult.source().substr(3);
// Evaluate code and cast to string
var newSource = vm.runInThisContext(source);
var newSource;
try {
newSource = vm.runInThisContext(source);
} catch (e) {
return Promise.reject(e);
}
return typeof newSource === 'string' ?
Promise.resolve(newSource) :
Promise.reject('The loader "' + this.options.template + '" didn\'t return html.');

View File

@ -29,15 +29,16 @@
},
"homepage": "https://github.com/ampedandwired/html-webpack-plugin",
"devDependencies": {
"css-loader": "^0.15.4",
"extract-text-webpack-plugin": "^0.8.2",
"file-loader": "^0.8.4",
"jasmine-node": "^2.0.0",
"jshint": "^2.8.0",
"rimraf": "^2.4.1",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"webpack": "^1.10.1"
"css-loader": "^0.12.0",
"extract-text-webpack-plugin": "^0.7.1",
"file-loader": "^0.8.1",
"html-loader": "^0.3.0",
"jasmine-node": "^1.14.5",
"jshint": "^2.7.0",
"rimraf": "^2.3.3",
"style-loader": "^0.12.2",
"url-loader": "^0.5.5",
"webpack": "^1.8.11"
},
"dependencies": {
"bluebird": "^2.9.34",

View File

@ -83,20 +83,6 @@ describe('HtmlWebpackPlugin', function() {
['<script src="app_bundle.js', 'Some unique text'], null, done);
});
it('allows you to specify your own HTML template string', function(done) {
testHtmlPlugin({
entry: {app: path.join(__dirname, 'fixtures/index.js')},
output: {
path: OUTPUT_DIR,
filename: 'app_bundle.js'
},
plugins: [new HtmlWebpackPlugin({
templateContent: fs.readFileSync(path.join(__dirname, 'fixtures/test.html'), 'utf8')
})]
},
['<script src="app_bundle.js'], null, done);
});
it('allows you to inject the assets into a given html file', function (done) {
testHtmlPlugin({
entry: {
@ -148,24 +134,6 @@ describe('HtmlWebpackPlugin', function() {
}, ['<script src="util_bundle.js"', '<script src="app_bundle.js"'], null, done);
});
it('allows you to inject the assets into a html string', function (done) {
testHtmlPlugin({
entry: {
util: path.join(__dirname, 'fixtures/util.js'),
app: path.join(__dirname, 'fixtures/index.js')
},
output: {
path: OUTPUT_DIR,
filename: '[name]_bundle.js'
},
plugins: [new HtmlWebpackPlugin({
inject: true,
chunks: ['util', 'app'],
templateContent: fs.readFileSync(path.join(__dirname, 'fixtures/plain.html'), 'utf8')
})]
}, ['<script src="util_bundle.js"', '<script src="app_bundle.js"'], null, done);
});
it('allows you to inject a specified asset into a given html file', function (done) {
testHtmlPlugin({
entry: {
@ -218,24 +186,6 @@ describe('HtmlWebpackPlugin', function() {
['<script src="app_bundle.js"'], null, done);
});
it('registers a webpack error both template and template content are specified', function(done) {
webpack({
entry: path.join(__dirname, 'fixtures/index.js'),
output: {
path: OUTPUT_DIR,
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin({
template: path.join(__dirname, 'fixtures/test.html'),
templateContent: 'whatever'
})]
}, function(err, stats) {
expect(stats.hasErrors()).toBe(true);
expect(stats.toJson().errors[0]).toContain('HtmlWebpackPlugin');
done();
});
});
it('works with source maps', function(done) {
testHtmlPlugin({
devtool: 'sourcemap',