Update examples
This commit is contained in:
Jan Nicklas
Jan Nicklas
parent
be966e70e0
commit
37e744dd85
|
|
@ -0,0 +1,4 @@
|
|||
# custom template
|
||||
|
||||
This example uses a custom underscore template which inlines an partial using the html-loader:
|
||||
`<%= require('html!./partial.html') %>`
|
||||
|
|
@ -2,10 +2,10 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example template</title>
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<img src="logo.png">
|
||||
<%= require('html!./partial.html') %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# zero-config example
|
||||
|
||||
in this example only the default configuration is used
|
||||
|
|
@ -1,4 +1,10 @@
|
|||
'use strict';
|
||||
require('./main.css');
|
||||
var h1 = document.createElement('h1');
|
||||
h1.innerHTML = 'Hello world!';
|
||||
document.body.appendChild(h1);
|
||||
// Use the same template for the frontend code
|
||||
var template = require('./time.jade');
|
||||
|
||||
setInterval(function() {
|
||||
var div = document.getElementById('main');
|
||||
div.innerHTML = template({ time: new Date()});
|
||||
div.style.color = 'navy';
|
||||
}, 1000);
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
# isomorphic jade example
|
||||
|
||||
This example shows how to use a different template engine (in this case jade)
|
||||
to load the `time.jade` template on the backend and frontend.
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
doctype html
|
||||
html
|
||||
head
|
||||
title my jade template
|
||||
body
|
||||
title= htmlWebpackPlugin.options.title
|
||||
body
|
||||
#main
|
||||
- locals.time = new Date();
|
||||
include ./time.jade
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// this partial is used for frontend and backend
|
||||
.time
|
||||
b Current time
|
||||
p #{time.toTimeString()}
|
||||
|
||||
img(src="#{require('./logo.png')}")
|
||||
|
|
@ -16,9 +16,10 @@ module.exports = {
|
|||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'jade-loader.html',
|
||||
filename: 'index.html',
|
||||
favicon: 'favicon.ico',
|
||||
template: 'template.jade'
|
||||
template: 'template.jade',
|
||||
title: 'Jade demo'
|
||||
}),
|
||||
new ExtractTextPlugin('styles.css')
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
require('./main.css');
|
||||
|
||||
var universal = require('./universial.js');
|
||||
var h1 = document.createElement('h1');
|
||||
h1.innerHTML = 'Hello world';
|
||||
h1.innerHTML = universal();
|
||||
|
||||
document.body.appendChild(h1);
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# isomorphic javascript example
|
||||
|
||||
This example shows how to generate a template on the fly using javascript.
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
// Webpack require:
|
||||
var partial = require('./partial.html');
|
||||
var universal = require('./universial.js');
|
||||
|
||||
// Export a function / promise / or a string:
|
||||
module.exports = new Date() + partial;
|
||||
module.exports = universal() + new Date() + partial;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
// This file is used for frontend and backend
|
||||
'use strict';
|
||||
module.exports = function() {
|
||||
return "Hello World";
|
||||
};
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
require('./main.css');
|
||||
var h1 = document.createElement('h1');
|
||||
h1.innerHTML = 'Hello world!';
|
||||
document.body.appendChild(h1);
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
body {
|
||||
background: snow;
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<!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>
|
||||
<%= require('html!./partial.html') %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
require('./main.css');
|
||||
var h1 = document.createElement('h1');
|
||||
h1.innerHTML = 'Hello world!';
|
||||
document.body.appendChild(h1);
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
body {
|
||||
background: snow;
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
<h2>Partial</h2>
|
||||
<img src="logo.png">
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<!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>
|
||||
<%= require('html!./partial.html') %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
var HtmlWebpackPlugin = require('../..');
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
module.exports = {
|
||||
entry: './example.js',
|
||||
output: {
|
||||
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({
|
||||
template: 'template.html'
|
||||
}),
|
||||
new ExtractTextPlugin('styles.css')
|
||||
]
|
||||
};
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
var HtmlWebpackPlugin = require('../..');
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
module.exports = {
|
||||
entry: './example.js',
|
||||
output: {
|
||||
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({
|
||||
template: 'template.html'
|
||||
}),
|
||||
new ExtractTextPlugin('styles.css')
|
||||
]
|
||||
};
|
||||
|
|
@ -1,13 +1,12 @@
|
|||
{
|
||||
"name": "html-webpack-plugin",
|
||||
"version": "2.3.0",
|
||||
"version": "2.4.0",
|
||||
"description": "Simplifies creation of HTML files to serve your webpack bundles",
|
||||
"main": "index.js",
|
||||
"files": [
|
||||
"index.js",
|
||||
"loader.js",
|
||||
"default_index.html",
|
||||
"default_inject_index.html"
|
||||
"default_index.html"
|
||||
],
|
||||
"scripts": {
|
||||
"pretest": "jshint *.js spec",
|
||||
|
|
@ -21,7 +20,7 @@
|
|||
"webpack",
|
||||
"plugin",
|
||||
"html",
|
||||
"generate"
|
||||
"html-webpack-plugin"
|
||||
],
|
||||
"author": "Charles Blaxland <charles.blaxland@gmail.com> (https://github.com/ampedandwired)",
|
||||
"license": "MIT",
|
||||
|
|
|
|||
Loading…
Reference in New Issue