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

Add support for require in js templates

This commit is contained in:
Jan Nicklas 2016-01-24 19:07:09 +01:00 committed by Jan Nicklas
parent 9e8259ae26
commit 70df65d9e5
15 changed files with 142 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
examples/javascript-advanced/dist/0714810ae3fb211173e2964249507195.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

65
examples/javascript-advanced/dist/bundle.js vendored Normal file
View File

@ -0,0 +1,65 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
eval("__webpack_require__(1);\n\nvar universal = __webpack_require__(5);\nvar h1 = document.createElement('h1');\nh1.innerHTML = universal();\n\ndocument.body.appendChild(h1);\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./example.js\n ** module id = 0\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./example.js?");
/***/ },
/* 1 */
/***/ function(module, exports) {
eval("// removed by extract-text-webpack-plugin\n\n/*****************\n ** WEBPACK FOOTER\n ** ./main.css\n ** module id = 1\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./main.css?");
/***/ },
/* 2 */,
/* 3 */,
/* 4 */,
/* 5 */
/***/ function(module, exports) {
eval("// This file is used for frontend and backend\n'use strict';\n\n// If compiled by the html-webpack-plugin\n// HTML_WEBPACK_PLUGIN is set to true:\nvar backend = typeof HTML_WEBPACK_PLUGIN !== 'undefined';\n\nmodule.exports = function () {\n return 'Hello World from ' + (backend ? 'backend' : 'frontend');\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./universial.js\n ** module id = 5\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./universial.js?");
/***/ }
/******/ ]);

2
examples/javascript-advanced/dist/index.html vendored Normal file
View File

@ -0,0 +1,2 @@
<html><head><title>Webpack App</title><link href="styles.css" rel="stylesheet"></head><body>Hello World from backend - <h2>Partial</h2>
<img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>

3
examples/javascript-advanced/dist/styles.css vendored Normal file
View File

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

7
examples/javascript-advanced/example.js Normal file
View File

@ -0,0 +1,7 @@
require('./main.css');
var universal = require('./universial.js');
var h1 = document.createElement('h1');
h1.innerHTML = universal();
document.body.appendChild(h1);

BIN
examples/javascript-advanced/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

3
examples/javascript-advanced/main.css Normal file
View File

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

2
examples/javascript-advanced/partial.html Normal file
View File

@ -0,0 +1,2 @@
<h2>Partial</h2>
<img src="logo.png">

4
examples/javascript-advanced/readme.md Normal file
View File

@ -0,0 +1,4 @@
# isomorphic javascript-advanced example
This example is similar to the javascript example however it allows takes
parameters from the config and works asynchronously

13
examples/javascript-advanced/template.js Normal file
View File

@ -0,0 +1,13 @@
// Webpack require:
var partial = require('./partial.html');
var universal = require('./universial.js');
// Export a function / promise / or a string:
// This function has to return a string or promised string:
module.exports = function (templateParams) {
var html = '<html><head>' +
'<title>' + templateParams.htmlWebpackPlugin.options.title + '</title>' +
'</head><body>' + universal() + ' - ' + partial + '</body></html>';
return html;
};

10
examples/javascript-advanced/universial.js Normal file
View File

@ -0,0 +1,10 @@
// This file is used for frontend and backend
'use strict';
// If compiled by the html-webpack-plugin
// HTML_WEBPACK_PLUGIN is set to true:
var backend = typeof HTML_WEBPACK_PLUGIN !== 'undefined';
module.exports = function () {
return 'Hello World from ' + (backend ? 'backend' : 'frontend');
};

24
examples/javascript-advanced/webpack.config.js Normal file
View File

@ -0,0 +1,24 @@
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' },
{ test: /\.html$/, loader: 'html-loader' }
]
},
devtool: 'eval',
plugins: [
new HtmlWebpackPlugin({
template: 'template.js'
}),
new ExtractTextPlugin('styles.css')
]
};

6
index.js
View File

@ -174,11 +174,13 @@ HtmlWebpackPlugin.prototype.evaluateCompilationResult = function (compilation, s
// The LibraryTemplatePlugin stores the template result in a local variable.
// To extract the result during the evaluation this part has to be removed.
source = source.replace('var HTML_WEBPACK_PLUGIN_RESULT =', '');
var template = this.options.template.replace(/^.+!/, '').replace(/\?.+$/, '');
var vmContext = vm.createContext(_.extend({HTML_WEBPACK_PLUGIN: true, require: require}, global));
var vmScript = new vm.Script(source, {filename: template});
// Evaluate code and cast to string
var newSource;
try {
newSource = vm.runInNewContext(source, {HTML_WEBPACK_PLUGIN: true}, {filename: 'html-plugin-evaluation'});
newSource = vmScript.runInContext(vmContext);
} catch (e) {
return Promise.reject(e);
}

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "html-webpack-plugin",
"version": "2.7.1",
"version": "2.7.2",
"description": "Simplifies creation of HTML files to serve your webpack bundles",
"main": "index.js",
"files": [

4
spec/ExampleSpec.js
View File

@ -67,4 +67,8 @@ describe('HtmlWebpackPlugin Examples', function () {
it('javascript example', function (done) {
runExample('javascript', done);
});
it('javascript-advanced example', function (done) {
runExample('javascript-advanced', done);
});
});