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

Add inlining

This commit is contained in:
Jan Nicklas 2016-03-23 10:07:26 +01:00
parent a04434a225
commit f616f2e22f
14 changed files with 183 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -1,6 +1,11 @@
Change History
==============
v2.14.0
----
* Export publicPath to the template
* Add example for inlining css and js
v2.13.0
----
* Add support for absolute output file names

60
examples/inline/dist/bundle.js vendored Normal file
View File

@ -0,0 +1,60 @@
/******/ (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__) {
'use strict';
__webpack_require__(1);
console.log('Hello World');
/***/ },
/* 1 */
/***/ function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ }
/******/ ]);

BIN
examples/inline/dist/favicon.ico vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 766 B

62
examples/inline/dist/index.html vendored Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html><html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Jade demo</title></head><body><style>body {
background: snow;
}</style><script>/******/ (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__) {
'use strict';
__webpack_require__(1);
console.log('Hello World');
/***/ },
/* 1 */
/***/ function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ }
/******/ ]);</script></body></html>

3
examples/inline/dist/styles.css vendored Normal file
View File

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

4
examples/inline/example.js Executable file
View File

@ -0,0 +1,4 @@
'use strict';
require('./main.css');
console.log('Hello World');

BIN
examples/inline/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 766 B

3
examples/inline/main.css Normal file
View File

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

4
examples/inline/readme.md Normal file
View File

@ -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.

10
examples/inline/template.jade Normal file
View File

@ -0,0 +1,10 @@
doctype html
html
head
meta(http-equiv="Content-type" content="text/html; charset=utf-8")
title #{htmlWebpackPlugin.options.title}
body
each cssFile in htmlWebpackPlugin.files.css
style !{compilation.assets[cssFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
each jsFile in htmlWebpackPlugin.files.js
script !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}

26
examples/inline/webpack.config.js Executable file
View File

@ -0,0 +1,26 @@
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: /\.jade$/, loader: 'jade' }
]
},
plugins: [
new HtmlWebpackPlugin({
inject: false,
template: 'template.jade',
filename: 'index.html',
favicon: 'favicon.ico',
title: 'Jade demo'
}),
new ExtractTextPlugin('styles.css')
]
};

6
index.js
View File

@ -215,13 +215,13 @@ HtmlWebpackPlugin.prototype.executeTemplate = function (templateFunction, chunks
// Template processing
.then(function () {
var templateParams = {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: self.options
},
compilation: compilation
}
};
var html = '';
try {
@ -357,6 +357,8 @@ HtmlWebpackPlugin.prototype.htmlWebpackPluginAssets = function (compilation, chu
}
var assets = {
// The public path
publicPath: publicPath,
// Will contain all js & css files by chunk
chunks: {},
// Will contain all js files

1
lib/loader.js
View File

@ -33,6 +33,7 @@ module.exports = function (source) {
// All templateVariables which should be available
// @see HtmlWebpackPlugin.prototype.executeTemplate
var templateVariables = [
'compilation',
'webpack',
'webpackConfig',
'htmlWebpackPlugin'

2
package.json
View File

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