Compare commits
25 Commits
master
...
version-3.
| Author | SHA1 | Date |
|---|---|---|
|
|
8039058daa | |
|
|
cd5fe7334b | |
|
|
7804cc3bbb | |
|
|
426dfc7ce2 | |
|
|
aa137c987e | |
|
|
57bb6286bc | |
|
|
4404f9d09c | |
|
|
374e23eadd | |
|
|
d64827acc4 | |
|
|
ae4a49ecf8 | |
|
|
0b4ce98b2e | |
|
|
0ba21651a2 | |
|
|
717eb6818b | |
|
|
d937cb2ffa | |
|
|
c5b8382ad5 | |
|
|
ed00a67437 | |
|
|
9628e6504c | |
|
|
f30426e028 | |
|
|
76e05ef39e | |
|
|
7c0ad5093b | |
|
|
78cb9867e1 | |
|
|
82bba6a5f6 | |
|
|
3d1e403ece | |
|
|
e8f749f6ba | |
|
|
0a7d2244f4 |
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"ignore": [
|
||||
"**/examples/**",
|
||||
"**/node_modules/**",
|
||||
],
|
||||
"test": [
|
||||
"**/spec/**"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
4.3.2
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
language: node_js
|
||||
node_js:
|
||||
- "0.12"
|
||||
- "0.10"
|
||||
- "4"
|
||||
- "5"
|
||||
- "6"
|
||||
env:
|
||||
- WEBPACK=webpack
|
||||
before_install:
|
||||
- stty columns 120
|
||||
install:
|
||||
- npm install --ignore-scripts
|
||||
- npm rm webpack
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
Change History
|
||||
==============
|
||||
|
||||
v3.x
|
||||
---
|
||||
* Rename `closingTag` into `voidTag` like in the official w3c spec.
|
||||
* Provide a `createHtmlTagObject` helper for plugin authors to create new tags.
|
||||
* Remove build in html minification
|
||||
* Support same node version like webpack 2: node 4 and higher
|
||||
|
||||
v2.26.0
|
||||
---
|
||||
* Allow plugins to add attributes without values to the `<script>` and `<link>` tags
|
||||
|
|
|
|||
28
README.md
28
README.md
|
|
@ -1,6 +1,6 @@
|
|||
HTML Webpack Plugin
|
||||
===================
|
||||
[](http://badge.fury.io/js/html-webpack-plugin) [](https://david-dm.org/ampedandwired/html-webpack-plugin) [](https://travis-ci.org/ampedandwired/html-webpack-plugin) [](https://ci.appveyor.com/project/jantimon/html-webpack-plugin) [](https://github.com/Flet/semistandard) [](https://www.bithound.io/github/ampedandwired/html-webpack-plugin/master/dependencies/npm) []()
|
||||
[](http://badge.fury.io/js/html-webpack-plugin) [](https://david-dm.org/jantimon/html-webpack-plugin) [](https://travis-ci.org/jantimon/html-webpack-plugin) [](https://ci.appveyor.com/project/jantimon/html-webpack-plugin) [](https://github.com/Flet/semistandard) [](https://www.bithound.io/github/jantimon/html-webpack-plugin/master/dependencies/npm) []()
|
||||
|
||||
[](https://nodei.co/npm/html-webpack-plugin/)
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ $ npm install html-webpack-plugin --save-dev
|
|||
Third party addons:
|
||||
-------------
|
||||
|
||||
The html-webpack-plugin provides [hooks](https://github.com/ampedandwired/html-webpack-plugin#events) to extend it to your needs.
|
||||
The html-webpack-plugin provides [hooks](https://github.com/jantimon/html-webpack-plugin#events) to extend it to your needs.
|
||||
There are already some really powerful plugins which can be integrated with zero configuration:
|
||||
|
||||
* [webpack-subresource-integrity](https://www.npmjs.com/package/webpack-subresource-integrity) for enhanced asset security
|
||||
|
|
@ -30,6 +30,10 @@ There are already some really powerful plugins which can be integrated with zero
|
|||
* [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin)
|
||||
* [html-webpack-inline-source-plugin](https://github.com/DustinJackson/html-webpack-inline-source-plugin) to inline your assets in the resulting HTML file
|
||||
* [html-webpack-exclude-assets-plugin](https://github.com/jamesjieye/html-webpack-exclude-assets-plugin) for excluding assets using regular expressions
|
||||
* [html-webpack-include-assets-plugin](https://github.com/jharris4/html-webpack-include-assets-plugin) for including lists of js or css file paths (such as those copied by the copy-webpack-plugin).
|
||||
* [script-ext-html-webpack-plugin](https://github.com/numical/script-ext-html-webpack-plugin) to add `async`, `defer` or `module` attributes to your`<script>` elements, or even in-line them
|
||||
* [style-ext-html-webpack-plugin](https://github.com/numical/style-ext-html-webpack-plugin) to convert your `<link>`s to external stylesheets into `<style>` elements containing internal CSS
|
||||
* [resource-hints-webpack-plugin](https://github.com/jantimon/resource-hints-webpack-plugin) to add resource hints for faster initial page loads
|
||||
|
||||
Basic Usage
|
||||
-----------
|
||||
|
|
@ -55,7 +59,7 @@ This will generate a file `dist/index.html` containing the following:
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Webpack App</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -79,10 +83,9 @@ Allowed values are as follows:
|
|||
- `title`: The title to use for the generated HTML document.
|
||||
- `filename`: The file to write the HTML to. Defaults to `index.html`.
|
||||
You can specify a subdirectory here too (eg: `assets/admin.html`).
|
||||
- `template`: Webpack require path to the template. Please see the [docs](https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md) for details.
|
||||
- `template`: Webpack require path to the template. Please see the [docs](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md) for details.
|
||||
- `inject`: `true | 'head' | 'body' | false` Inject all assets into the given `template` or `templateContent` - When passing `true` or `'body'` all javascript resources will be placed at the bottom of the body element. `'head'` will place the scripts in the head element.
|
||||
- `favicon`: Adds the given favicon path to the output html.
|
||||
- `minify`: `{...} | false` Pass a [html-minifier](https://github.com/kangax/html-minifier#options-quick-reference) options object to minify the output.
|
||||
- `hash`: `true | false` if `true` then append a unique webpack compilation hash to all
|
||||
included scripts and CSS files. This is useful for cache busting.
|
||||
- `cache`: `true | false` if `true` (default) try to emit the file only if it was changed.
|
||||
|
|
@ -112,9 +115,9 @@ Here's an example webpack config illustrating how to use these options:
|
|||
FAQ
|
||||
----
|
||||
|
||||
* [Why is my HTML minified?](https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md)
|
||||
* [Why is my `<% ... %>` template not working?](https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md)
|
||||
* [How can I use handlebars/pug/ejs as template engine](https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md)
|
||||
* [Why is my HTML minified?](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md)
|
||||
* [Why is my `<% ... %>` template not working?](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md)
|
||||
* [How can I use handlebars/pug/ejs as template engine](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md)
|
||||
|
||||
Generating Multiple HTML Files
|
||||
------------------------------
|
||||
|
|
@ -159,7 +162,7 @@ plugins: [
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
||||
<meta charset="utf-8"/>
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -305,9 +308,12 @@ Note that the callback must be passed the htmlPluginData in order to pass this o
|
|||
|
||||
# Contribution
|
||||
|
||||
You're free to contribute to this project by submitting [issues](https://github.com/ampedandwired/html-webpack-plugin/issues) and/or [pull requests](https://github.com/ampedandwired/html-webpack-plugin/pulls). This project is test-driven, so keep in mind that every change and new feature should be covered by tests.
|
||||
You're free to contribute to this project by submitting [issues](https://github.com/jantimon/html-webpack-plugin/issues) and/or [pull requests](https://github.com/jantimon/html-webpack-plugin/pulls). This project is test-driven, so keep in mind that every change and new feature should be covered by tests.
|
||||
This project uses the [semistandard code style](https://github.com/Flet/semistandard).
|
||||
This plugin follows the webpack teams decision to support [node 4+](http://node.green/).
|
||||
|
||||
Before running the tests, make sure to execute `yarn link` and `yarn link html-webpack-plugin` (or the npm variant of this).
|
||||
|
||||
# License
|
||||
|
||||
This project is licensed under [MIT](https://github.com/ampedandwired/html-webpack-plugin/blob/master/LICENSE).
|
||||
This project is licensed under [MIT](https://github.com/jantimon/html-webpack-plugin/blob/master/LICENSE).
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="utf-8">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1 +1,11 @@
|
|||
<!doctype html><html lang="en" manifest="manifest.appcache"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script type="text/javascript" src="bundle.js"></script></body></html>
|
||||
<!doctype html>
|
||||
<html lang="en" manifest="manifest.appcache">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="styles.css" rel="stylesheet"></head>
|
||||
<body>
|
||||
<img src="0714810ae3fb211173e2964249507195.png">
|
||||
<script src="bundle.js"></script></body>
|
||||
</html>
|
||||
|
|
@ -1 +1,11 @@
|
|||
<!doctype html><html lang="en" manifest="manifest.appcache"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script type="text/javascript" src="bundle.js"></script></body></html>
|
||||
<!doctype html>
|
||||
<html lang="en" manifest="manifest.appcache">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="styles.css" rel="stylesheet"></head>
|
||||
<body>
|
||||
<img src="0714810ae3fb211173e2964249507195.png">
|
||||
<script src="bundle.js"></script></body>
|
||||
</html>
|
||||
|
|
@ -22,11 +22,7 @@ module.exports = {
|
|||
new AppCachePlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'index.html',
|
||||
template: 'template.html',
|
||||
minify: {
|
||||
removeComments: true,
|
||||
collapseWhitespace: true
|
||||
}
|
||||
template: 'template.html'
|
||||
}),
|
||||
new ExtractTextPlugin('styles.css')
|
||||
]
|
||||
|
|
|
|||
|
|
@ -8,5 +8,5 @@
|
|||
<body>
|
||||
<h2>Partial</h2>
|
||||
<img src="0714810ae3fb211173e2964249507195.png">
|
||||
<script type="text/javascript" src="bundle.js"></script></body>
|
||||
<script src="bundle.js"></script></body>
|
||||
</html>
|
||||
|
|
@ -8,5 +8,5 @@
|
|||
<body>
|
||||
<h2>Partial</h2>
|
||||
<img src="0714810ae3fb211173e2964249507195.png">
|
||||
<script type="text/javascript" src="bundle.js"></script></body>
|
||||
<script src="bundle.js"></script></body>
|
||||
</html>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Webpack App</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="bundle.js"></script></body>
|
||||
<script src="bundle.js"></script></body>
|
||||
</html>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Webpack App</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="bundle.js"></script></body>
|
||||
<script src="bundle.js"></script></body>
|
||||
</html>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="utf-8">
|
||||
<title>HtmlWebpackPlugin example</title>
|
||||
<link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head>
|
||||
<body>
|
||||
<script type="text/javascript" src="bundle.js"></script></body>
|
||||
<script src="bundle.js"></script></body>
|
||||
</html>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="utf-8">
|
||||
<title>HtmlWebpackPlugin example</title>
|
||||
<link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head>
|
||||
<body>
|
||||
<script type="text/javascript" src="bundle.js"></script></body>
|
||||
<script src="bundle.js"></script></body>
|
||||
</html>
|
||||
|
|
@ -7,5 +7,5 @@
|
|||
<link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head>
|
||||
<body>
|
||||
<img src="0714810ae3fb211173e2964249507195.png">
|
||||
<script type="text/javascript" src="bundle.js"></script></body>
|
||||
<script src="bundle.js"></script></body>
|
||||
</html>
|
||||
|
|
@ -7,5 +7,5 @@
|
|||
<link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head>
|
||||
<body>
|
||||
<img src="0714810ae3fb211173e2964249507195.png">
|
||||
<script type="text/javascript" src="bundle.js"></script></body>
|
||||
<script src="bundle.js"></script></body>
|
||||
</html>
|
||||
|
|
@ -7,5 +7,5 @@
|
|||
<link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head>
|
||||
<body>
|
||||
<img src="0714810ae3fb211173e2964249507195.png">
|
||||
<script type="text/javascript" src="bundle.js"></script></body>
|
||||
<script src="bundle.js"></script></body>
|
||||
</html>
|
||||
|
|
@ -7,5 +7,5 @@
|
|||
<link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head>
|
||||
<body>
|
||||
<img src="0714810ae3fb211173e2964249507195.png">
|
||||
<script type="text/javascript" src="bundle.js"></script></body>
|
||||
<script src="bundle.js"></script></body>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html><html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Jade demo</title></head><body><style>body {
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Jade demo</title></head><body><style>body {
|
||||
background: snow;
|
||||
}</style><script type="text/javascript">/******/ (function(modules) { // webpackBootstrap
|
||||
}</style><script>/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html><html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Jade demo</title></head><body><style>body {
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Jade demo</title></head><body><style>body {
|
||||
background: snow;
|
||||
}</style><script type="text/javascript">/******/ (function(modules) { // webpackBootstrap
|
||||
}</style><script>/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
doctype html
|
||||
html
|
||||
head
|
||||
meta(http-equiv="Content-type" content="text/html; charset=utf-8")
|
||||
meta(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(type="text/javascript") !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
|
||||
script !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<!DOCTYPE html><html><head><title>Jade demo</title><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><div id="main"><!-- this partial is used for frontend and backend--><div class="time"> <b>Current time</b><p>1998-12-31T23:00:00.000Z</p></div><img src="0714810ae3fb211173e2964249507195.png"></div><script type="text/javascript" src="bundle.js"></script></body></html>
|
||||
<!DOCTYPE html><html><head><title>Jade demo</title><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><div id="main"><!-- this partial is used for frontend and backend--><div class="time"> <b>Current time</b><p>1998-12-31T23:00:00.000Z</p></div><img src="0714810ae3fb211173e2964249507195.png"></div><script src="bundle.js"></script></body></html>
|
||||
|
|
@ -1 +1 @@
|
|||
<!DOCTYPE html><html><head><title>Jade demo</title><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><div id="main"><!-- this partial is used for frontend and backend--><div class="time"> <b>Current time</b><p>1998-12-31T23:00:00.000Z</p></div><img src="0714810ae3fb211173e2964249507195.png"></div><script type="text/javascript" src="bundle.js"></script></body></html>
|
||||
<!DOCTYPE html><html><head><title>Jade demo</title><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><div id="main"><!-- this partial is used for frontend and backend--><div class="time"> <b>Current time</b><p>1998-12-31T23:00:00.000Z</p></div><img src="0714810ae3fb211173e2964249507195.png"></div><script src="bundle.js"></script></body></html>
|
||||
|
|
@ -13,7 +13,7 @@ module.exports = {
|
|||
loaders: [
|
||||
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
|
||||
{ test: /\.png$/, loader: 'file-loader' },
|
||||
{ test: /\.jade$/, loader: 'jade' }
|
||||
{ test: /\.jade$/, loader: 'jade-loader' }
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
|
|
|
|||
|
|
@ -1,2 +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 type="text/javascript" src="bundle.js"></script></body></html>
|
||||
<img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
|
||||
|
|
@ -1,2 +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 type="text/javascript" src="bundle.js"></script></body></html>
|
||||
<img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
<head><link href="styles.css" rel="stylesheet"></head>Hello World from backend2016-10-29T07:02:05.646Z<h2>Partial</h2>
|
||||
<img src="0714810ae3fb211173e2964249507195.png"><script type="text/javascript" src="bundle.js"></script>
|
||||
<img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script>
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
<head><link href="styles.css" rel="stylesheet"></head>Hello World from backend2016-07-02T10:27:15.263Z<h2>Partial</h2>
|
||||
<img src="0714810ae3fb211173e2964249507195.png"><script type="text/javascript" src="bundle.js"></script>
|
||||
<img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
var toposort = require('toposort');
|
||||
const toposort = require('toposort');
|
||||
const _ = require('lodash');
|
||||
|
||||
/*
|
||||
Sorts dependencies between chunks by their "parents" attribute.
|
||||
|
|
@ -27,20 +28,21 @@ module.exports.dependency = function (chunks) {
|
|||
}
|
||||
|
||||
// We build a map (chunk-id -> chunk) for faster access during graph building.
|
||||
var nodeMap = {};
|
||||
const nodeMap = {};
|
||||
|
||||
chunks.forEach(function (chunk) {
|
||||
chunks.forEach(chunk => {
|
||||
nodeMap[chunk.id] = chunk;
|
||||
});
|
||||
|
||||
// Next, we add an edge for each parent relationship into the graph
|
||||
var edges = [];
|
||||
const edges = [];
|
||||
|
||||
chunks.forEach(function (chunk) {
|
||||
chunks.forEach(chunk => {
|
||||
if (chunk.parents) {
|
||||
// Add an edge for each parent (parent -> child)
|
||||
chunk.parents.forEach(function (parentId) {
|
||||
var parentChunk = nodeMap[parentId];
|
||||
chunk.parents.forEach(parentId => {
|
||||
// webpack2 chunk.parents are chunks instead of string id(s)
|
||||
const parentChunk = _.isObject(parentId) ? parentId : nodeMap[parentId];
|
||||
// If the parent chunk does not exist (e.g. because of an excluded chunk)
|
||||
// we ignore that parent
|
||||
if (parentChunk) {
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@
|
|||
*
|
||||
*/
|
||||
'use strict';
|
||||
var Promise = require('bluebird');
|
||||
var _ = require('lodash');
|
||||
var path = require('path');
|
||||
var NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin');
|
||||
var NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
|
||||
var LoaderTargetPlugin = require('webpack/lib/LoaderTargetPlugin');
|
||||
var LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');
|
||||
var SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
|
||||
const Promise = require('bluebird');
|
||||
const _ = require('lodash');
|
||||
const path = require('path');
|
||||
const NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin');
|
||||
const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
|
||||
const LoaderTargetPlugin = require('webpack/lib/LoaderTargetPlugin');
|
||||
const LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');
|
||||
const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
|
||||
|
||||
/**
|
||||
* Compiles the template into a nodejs factory, adds its to the compilation.assets
|
||||
|
|
@ -33,17 +33,17 @@ var SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
|
|||
module.exports.compileTemplate = function compileTemplate (template, context, outputFilename, compilation) {
|
||||
// The entry file is just an empty helper as the dynamic template
|
||||
// require is added in "loader.js"
|
||||
var outputOptions = {
|
||||
const outputOptions = {
|
||||
filename: outputFilename,
|
||||
publicPath: compilation.outputOptions.publicPath
|
||||
};
|
||||
// Store the result of the parent compilation before we start the child compilation
|
||||
var assetsBeforeCompilation = _.assign({}, compilation.assets[outputOptions.filename]);
|
||||
const assetsBeforeCompilation = _.assign({}, compilation.assets[outputOptions.filename]);
|
||||
// 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 compilerName = getCompilerName(context, outputFilename);
|
||||
var childCompiler = compilation.createChildCompiler(compilerName, outputOptions);
|
||||
const compilerName = getCompilerName(context, outputFilename);
|
||||
const childCompiler = compilation.createChildCompiler(compilerName, outputOptions);
|
||||
childCompiler.context = context;
|
||||
childCompiler.apply(
|
||||
new NodeTemplatePlugin(outputOptions),
|
||||
|
|
@ -56,7 +56,7 @@ module.exports.compileTemplate = function compileTemplate (template, context, ou
|
|||
// Fix for "Uncaught TypeError: __webpack_require__(...) is not a function"
|
||||
// Hot module replacement requires that every child compiler has its own
|
||||
// cache. @see https://github.com/ampedandwired/html-webpack-plugin/pull/179
|
||||
childCompiler.plugin('compilation', function (compilation) {
|
||||
childCompiler.plugin('compilation', compilation => {
|
||||
if (compilation.cache) {
|
||||
if (!compilation.cache[compilerName]) {
|
||||
compilation.cache[compilerName] = {};
|
||||
|
|
@ -66,19 +66,17 @@ module.exports.compileTemplate = function compileTemplate (template, context, ou
|
|||
});
|
||||
|
||||
// Compile and return a promise
|
||||
return new Promise(function (resolve, reject) {
|
||||
childCompiler.runAsChild(function (err, entries, childCompilation) {
|
||||
return new Promise((resolve, reject) => {
|
||||
childCompiler.runAsChild((err, entries, childCompilation) => {
|
||||
// Resolve / reject the promise
|
||||
if (childCompilation && childCompilation.errors && childCompilation.errors.length) {
|
||||
var errorDetails = childCompilation.errors.map(function (error) {
|
||||
return error.message + (error.error ? ':\n' + error.error : '');
|
||||
}).join('\n');
|
||||
reject(new Error('Child compilation failed:\n' + errorDetails));
|
||||
const errorDetails = childCompilation.errors.map(error => error.message + ((error.error ? `:\n${error.error}` : ''))).join('\n');
|
||||
reject(new Error(`Child compilation failed:\n${errorDetails}`));
|
||||
} else if (err) {
|
||||
reject(err);
|
||||
} else {
|
||||
// Replace [hash] placeholders in filename
|
||||
var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
|
||||
const outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
|
||||
hash: childCompilation.hash,
|
||||
chunk: entries[0]
|
||||
});
|
||||
|
|
@ -106,7 +104,7 @@ module.exports.compileTemplate = function compileTemplate (template, context, ou
|
|||
* Returns the child compiler name e.g. 'html-webpack-plugin for "index.html"'
|
||||
*/
|
||||
function getCompilerName (context, filename) {
|
||||
var absolutePath = path.resolve(context, filename);
|
||||
var relativePath = path.relative(context, absolutePath);
|
||||
return 'html-webpack-plugin for "' + (absolutePath.length < relativePath.length ? absolutePath : relativePath) + '"';
|
||||
const absolutePath = path.resolve(context, filename);
|
||||
const relativePath = path.relative(context, absolutePath);
|
||||
return `html-webpack-plugin for "${absolutePath.length < relativePath.length ? absolutePath : relativePath}"`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
'use strict';
|
||||
var PrettyError = require('pretty-error');
|
||||
var prettyError = new PrettyError();
|
||||
const PrettyError = require('pretty-error');
|
||||
const prettyError = new PrettyError();
|
||||
prettyError.withoutColors();
|
||||
prettyError.skipPackage(['html-plugin-evaluation']);
|
||||
prettyError.skipNodeFiles();
|
||||
prettyError.skip(function (traceLine) {
|
||||
return traceLine.path === 'html-plugin-evaluation';
|
||||
});
|
||||
prettyError.skip(traceLine => traceLine.path === 'html-plugin-evaluation');
|
||||
|
||||
module.exports = function (err, context) {
|
||||
return {
|
||||
toHtml: function () {
|
||||
return 'Html Webpack Plugin:\n<pre>\n' + this.toString() + '</pre>';
|
||||
return `Html Webpack Plugin:\n<pre>\n${this.toString()}</pre>`;
|
||||
},
|
||||
toJsonHtml: function () {
|
||||
return JSON.stringify(this.toHtml());
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
/**
|
||||
* This file helps to work with html tags as objects which are easy to modify
|
||||
* and turn into a string
|
||||
*/
|
||||
|
||||
/**
|
||||
* Turn a tag definition into a html string
|
||||
*/
|
||||
function htmlTagObjectToString (tagDefinition, xhtml) {
|
||||
const attributes = Object.keys(tagDefinition.attributes || {})
|
||||
.filter(attributeName => tagDefinition.attributes[attributeName] !== false)
|
||||
.map(attributeName => {
|
||||
if (tagDefinition.attributes[attributeName] === true) {
|
||||
return xhtml ? `${attributeName}="${attributeName}"` : attributeName;
|
||||
}
|
||||
return `${attributeName}="${tagDefinition.attributes[attributeName]}"`;
|
||||
});
|
||||
|
||||
return `<${[tagDefinition.tagName].concat(attributes).join(' ')}${tagDefinition.voidTag && xhtml ? '/' : ''}>${tagDefinition.innerHTML || ''}${tagDefinition.voidTag ? '' : `</${tagDefinition.tagName}>`}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Static helper to create a tag object to be get injected into the dom
|
||||
*
|
||||
* @param {String} tagName - the name of the tage e.g. 'div'
|
||||
* @param {Object} attributes - tag attributes e.g. `{ 'class': 'example', disabled: true }`
|
||||
*/
|
||||
function createHtmlTagObject (tagName, attributes) {
|
||||
// https://www.w3.org/TR/html5/syntax.html#void-elements
|
||||
const voidTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
|
||||
return {
|
||||
tagName: tagName,
|
||||
voidTag: voidTags.indexOf(tagName) !== -1,
|
||||
attributes: attributes
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
createHtmlTagObject: createHtmlTagObject,
|
||||
htmlTagObjectToString: htmlTagObjectToString
|
||||
};
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
/* This loader renders the template with underscore if no other loader was found */
|
||||
'use strict';
|
||||
|
||||
var _ = require('lodash');
|
||||
var loaderUtils = require('loader-utils');
|
||||
const _ = require('lodash');
|
||||
const loaderUtils = require('loader-utils');
|
||||
|
||||
module.exports = function (source) {
|
||||
if (this.cacheable) {
|
||||
this.cacheable();
|
||||
}
|
||||
var allLoadersButThisOne = this.loaders.filter(function (loader) {
|
||||
const allLoadersButThisOne = this.loaders.filter(loader => {
|
||||
// Loader API changed from `loader.module` to `loader.normal` in Webpack 2.
|
||||
return (loader.module || loader.normal) !== module.exports;
|
||||
});
|
||||
|
|
@ -24,28 +24,26 @@ module.exports = function (source) {
|
|||
// The following part renders the tempalte with lodash as aminimalistic loader
|
||||
//
|
||||
// Get templating options
|
||||
var options = loaderUtils.parseQuery(this.query);
|
||||
const options = loaderUtils.parseQuery(this.query);
|
||||
// Webpack 2 does not allow with() statements, which lodash templates use to unwrap
|
||||
// the parameters passed to the compiled template inside the scope. We therefore
|
||||
// need to unwrap them ourselves here. This is essentially what lodash does internally
|
||||
// To tell lodash it should not use with we set a variable
|
||||
var template = _.template(source, _.defaults(options, { variable: 'data' }));
|
||||
const template = _.template(source, _.defaults(options, { variable: 'data' }));
|
||||
// All templateVariables which should be available
|
||||
// @see HtmlWebpackPlugin.prototype.executeTemplate
|
||||
var templateVariables = [
|
||||
const templateVariables = [
|
||||
'compilation',
|
||||
'webpack',
|
||||
'webpackConfig',
|
||||
'htmlWebpackPlugin'
|
||||
];
|
||||
return 'var _ = require(' + loaderUtils.stringifyRequest(this, require.resolve('lodash')) + ');' +
|
||||
'module.exports = function (templateParams) {' +
|
||||
// Declare the template variables in the outer scope of the
|
||||
return `var _ = require(${loaderUtils.stringifyRequest(this, require.resolve('lodash'))});
|
||||
module.exports = function (templateParams) {
|
||||
${// Declare the template variables in the outer scope of the
|
||||
// lodash template to unwrap them
|
||||
templateVariables.map(function (variableName) {
|
||||
return 'var ' + variableName + ' = templateParams.' + variableName;
|
||||
}).join(';') + ';' +
|
||||
// Execute the lodash template
|
||||
'return (' + template.source + ')();' +
|
||||
'}';
|
||||
templateVariables.map(variableName => `var ${variableName} = templateParams.${variableName}`).join(';')
|
||||
};
|
||||
return (${template.source})();
|
||||
}`;
|
||||
};
|
||||
|
|
|
|||
14
package.json
14
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "html-webpack-plugin",
|
||||
"version": "2.26.0",
|
||||
"version": "3.0.0",
|
||||
"description": "Simplifies creation of HTML files to serve your webpack bundles",
|
||||
"main": "index.js",
|
||||
"files": [
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/ampedandwired/html-webpack-plugin.git"
|
||||
"url": "https://github.com/jantimon/html-webpack-plugin.git"
|
||||
},
|
||||
"keywords": [
|
||||
"webpack",
|
||||
|
|
@ -27,9 +27,9 @@
|
|||
"author": "Charles Blaxland <charles.blaxland@gmail.com> (https://github.com/ampedandwired)",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/ampedandwired/html-webpack-plugin/issues"
|
||||
"url": "https://github.com/jantimon/html-webpack-plugin/issues"
|
||||
},
|
||||
"homepage": "https://github.com/ampedandwired/html-webpack-plugin",
|
||||
"homepage": "https://github.com/jantimon/html-webpack-plugin",
|
||||
"semistandard": {
|
||||
"ignore": [
|
||||
"examples/*/dist/**/*.*"
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
"jade-loader": "^0.8.0",
|
||||
"jasmine": "^2.5.2",
|
||||
"rimraf": "^2.5.4",
|
||||
"semistandard": "8.0.0",
|
||||
"semistandard": "9.2.1",
|
||||
"style-loader": "^0.13.1",
|
||||
"underscore-template-loader": "^0.7.3",
|
||||
"url-loader": "^0.5.7",
|
||||
|
|
@ -56,7 +56,6 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"bluebird": "^3.4.7",
|
||||
"html-minifier": "^3.2.3",
|
||||
"loader-utils": "^0.2.16",
|
||||
"lodash": "^4.17.3",
|
||||
"pretty-error": "^2.0.2",
|
||||
|
|
@ -64,5 +63,8 @@
|
|||
},
|
||||
"peerDependencies": {
|
||||
"webpack": "1 || ^2 || ^2.1.0-beta || ^2.2.0-rc"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.3.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
filename: 'index_bundle.js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin()]
|
||||
}, [/<body>[\s]*<script type="text\/javascript" src="index_bundle.js"><\/script>[\s]*<\/body>/], null, done);
|
||||
}, [/<body>[\s]*<script src="index_bundle.js"><\/script>[\s]*<\/body>/], null, done);
|
||||
});
|
||||
|
||||
it('generates a default index.html file with multiple entry points', function (done) {
|
||||
|
|
@ -114,7 +114,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
filename: '[name]_bundle.js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin()]
|
||||
}, ['<script type="text/javascript" src="util_bundle.js"', '<script type="text/javascript" src="app_bundle.js"'], null, done);
|
||||
}, ['<script src="util_bundle.js"', '<script src="app_bundle.js"'], null, done);
|
||||
});
|
||||
|
||||
it('allows you to specify a custom loader without injection', function (done) {
|
||||
|
|
@ -131,7 +131,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
template: 'jade-loader!' + path.join(__dirname, 'fixtures/template.jade')
|
||||
})]
|
||||
},
|
||||
['<script type="text/javascript" src="app_bundle.js', 'Some unique text'], null, done);
|
||||
['<script src="app_bundle.js', 'Some unique text'], null, done);
|
||||
});
|
||||
|
||||
it('should pass through loader errors', function (done) {
|
||||
|
|
@ -170,7 +170,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
template: path.join(__dirname, 'fixtures/template.jade')
|
||||
})]
|
||||
},
|
||||
['<script type="text/javascript" src="app_bundle.js', 'Some unique text'], null, done);
|
||||
['<script src="app_bundle.js', 'Some unique text'], null, done);
|
||||
});
|
||||
|
||||
it('works when using html-loader', function (done) {
|
||||
|
|
@ -187,7 +187,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
template: 'html-loader!' + path.join(__dirname, 'fixtures/plain.html')
|
||||
})]
|
||||
},
|
||||
['<script type="text/javascript" src="app_bundle.js"'], null, done);
|
||||
['<script src="app_bundle.js"'], null, done);
|
||||
});
|
||||
|
||||
it('allows you to specify your own HTML template file', function (done) {
|
||||
|
|
@ -204,7 +204,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
inject: false
|
||||
})]
|
||||
},
|
||||
['<script type="text/javascript" src="app_bundle.js', 'Some unique text'], null, done);
|
||||
['<script src="app_bundle.js', 'Some unique text'], null, done);
|
||||
});
|
||||
|
||||
it('allows you to inject the assets into a given html file', function (done) {
|
||||
|
|
@ -221,7 +221,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
inject: true,
|
||||
template: path.join(__dirname, 'fixtures/plain.html')
|
||||
})]
|
||||
}, ['<script type="text/javascript" src="util_bundle.js"', '<script type="text/javascript" src="app_bundle.js"'], null, done);
|
||||
}, ['<script src="util_bundle.js"', '<script src="app_bundle.js"'], null, done);
|
||||
});
|
||||
|
||||
it('allows you to inject the assets into the body of the given template', function (done) {
|
||||
|
|
@ -238,7 +238,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
inject: 'body',
|
||||
template: path.join(__dirname, 'fixtures/plain.html')
|
||||
})]
|
||||
}, ['<script type="text/javascript" src="util_bundle.js"', '<script type="text/javascript" src="app_bundle.js"'], null, done);
|
||||
}, ['<script src="util_bundle.js"', '<script src="app_bundle.js"'], null, done);
|
||||
});
|
||||
|
||||
it('allows you to inject the assets into the head of the given template', function (done) {
|
||||
|
|
@ -255,7 +255,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
inject: 'head',
|
||||
template: path.join(__dirname, 'fixtures/plain.html')
|
||||
})]
|
||||
}, ['<script type="text/javascript" src="util_bundle.js"', '<script type="text/javascript" src="app_bundle.js"'], null, done);
|
||||
}, ['<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) {
|
||||
|
|
@ -273,7 +273,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
chunks: ['app'],
|
||||
template: path.join(__dirname, 'fixtures/plain.html')
|
||||
})]
|
||||
}, ['<script type="text/javascript" src="app_bundle.js"'], null, done);
|
||||
}, ['<script src="app_bundle.js"'], null, done);
|
||||
});
|
||||
|
||||
it('allows you to inject a specified asset into a given html file', function (done) {
|
||||
|
|
@ -291,7 +291,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
excludeChunks: ['util'],
|
||||
template: path.join(__dirname, 'fixtures/plain.html')
|
||||
})]
|
||||
}, ['<script type="text/javascript" src="app_bundle.js"'], null, done);
|
||||
}, ['<script src="app_bundle.js"'], null, done);
|
||||
});
|
||||
|
||||
it('allows you to use chunkhash with asset into a given html file', function (done) {
|
||||
|
|
@ -310,7 +310,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
}, [{
|
||||
type: 'chunkhash',
|
||||
chunkName: 'app',
|
||||
containStr: '<script type="text/javascript" src="app_bundle.js?%chunkhash%"'
|
||||
containStr: '<script src="app_bundle.js?%chunkhash%"'
|
||||
}], null, done);
|
||||
});
|
||||
|
||||
|
|
@ -344,7 +344,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
}
|
||||
})]
|
||||
},
|
||||
['<script type="text/javascript" src="app_bundle.js"'], null, done);
|
||||
['<script src="app_bundle.js"'], null, done);
|
||||
});
|
||||
|
||||
it('works with source maps', function (done) {
|
||||
|
|
@ -356,7 +356,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
filename: 'index_bundle.js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin()]
|
||||
}, ['<script type="text/javascript" src="index_bundle.js"'], null, done);
|
||||
}, ['<script src="index_bundle.js"'], null, done);
|
||||
});
|
||||
|
||||
it('handles hashes in bundle filenames', function (done) {
|
||||
|
|
@ -367,7 +367,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
filename: 'index_bundle_[hash].js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin()]
|
||||
}, [/<script type="text\/javascript" src="index_bundle_[0-9a-f]+\.js"*/], null, done);
|
||||
}, [/<script src="index_bundle_[0-9a-f]+\.js"*/], null, done);
|
||||
});
|
||||
|
||||
it('handles hashes in the directory which has the bundle file', function (done) {
|
||||
|
|
@ -379,7 +379,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
filename: 'index_bundle_[hash].js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin()]
|
||||
}, [/<script type="text\/javascript" src="\/dist\/[0-9a-f]+\/index_bundle_[0-9a-f]+\.js"*/], null, done);
|
||||
}, [/<script src="\/dist\/[0-9a-f]+\/index_bundle_[0-9a-f]+\.js"*/], null, done);
|
||||
});
|
||||
|
||||
it('allows to append hashes to the assets', function (done) {
|
||||
|
|
@ -390,7 +390,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
filename: 'index_bundle.js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin({hash: true})]
|
||||
}, ['<script type="text/javascript" src="index_bundle.js?%hash%"'], null, done);
|
||||
}, ['<script src="index_bundle.js?%hash%"'], null, done);
|
||||
});
|
||||
|
||||
it('allows to append hashes to the assets', function (done) {
|
||||
|
|
@ -401,7 +401,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
filename: 'index_bundle.js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin({hash: true, inject: true})]
|
||||
}, ['<script type="text/javascript" src="index_bundle.js?%hash%"'], null, done);
|
||||
}, ['<script src="index_bundle.js?%hash%"'], null, done);
|
||||
});
|
||||
|
||||
it('should work with the css extract plugin', function (done) {
|
||||
|
|
@ -534,7 +534,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
publicPath: 'http://cdn.example.com/assets/'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin()]
|
||||
}, ['<script type="text/javascript" src="http://cdn.example.com/assets/index_bundle.js"'], null, done);
|
||||
}, ['<script src="http://cdn.example.com/assets/index_bundle.js"'], null, done);
|
||||
});
|
||||
|
||||
it('handles subdirectories in the webpack output bundles', function (done) {
|
||||
|
|
@ -545,7 +545,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
filename: 'assets/index_bundle.js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin()]
|
||||
}, ['<script type="text/javascript" src="assets/index_bundle.js"'], null, done);
|
||||
}, ['<script src="assets/index_bundle.js"'], null, done);
|
||||
});
|
||||
|
||||
it('handles subdirectories in the webpack output bundles along with a public path', function (done) {
|
||||
|
|
@ -557,7 +557,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
publicPath: 'http://cdn.example.com/'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin()]
|
||||
}, ['<script type="text/javascript" src="http://cdn.example.com/assets/index_bundle.js"'], null, 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) {
|
||||
|
|
@ -579,7 +579,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
filename: 'index_bundle.js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin({filename: 'test.html'})]
|
||||
}, ['<script type="text/javascript" src="index_bundle.js"'], 'test.html', done);
|
||||
}, ['<script src="index_bundle.js"'], 'test.html', done);
|
||||
});
|
||||
|
||||
it('will replace [hash] in the filename with the child compilation hash', function (done) {
|
||||
|
|
@ -592,7 +592,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
plugins: [new HtmlWebpackPlugin({
|
||||
filename: 'test-[hash].html'
|
||||
})]
|
||||
}, ['<script type="text/javascript" src="index_bundle.js"'], /test-\S+\.html$/, done);
|
||||
}, ['<script src="index_bundle.js"'], /test-\S+\.html$/, done);
|
||||
});
|
||||
|
||||
it('allows you to use an absolute output filename', function (done) {
|
||||
|
|
@ -605,7 +605,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
plugins: [new HtmlWebpackPlugin({
|
||||
filename: path.resolve(OUTPUT_DIR, 'subfolder', 'test.html')
|
||||
})]
|
||||
}, ['<script type="text/javascript" src="../index_bundle.js"'], path.join('subfolder', 'test.html'), done);
|
||||
}, ['<script src="../index_bundle.js"'], path.join('subfolder', 'test.html'), done);
|
||||
});
|
||||
|
||||
it('allows you to use an absolute output filename outside the output path', function (done) {
|
||||
|
|
@ -618,7 +618,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
plugins: [new HtmlWebpackPlugin({
|
||||
filename: path.resolve(OUTPUT_DIR, 'test.html')
|
||||
})]
|
||||
}, ['<script type="text/javascript" src="app/index_bundle.js"'], 'test.html', done);
|
||||
}, ['<script src="app/index_bundle.js"'], 'test.html', done);
|
||||
});
|
||||
|
||||
it('allows you to use an relative output filename outside the output path', function (done) {
|
||||
|
|
@ -631,7 +631,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
plugins: [new HtmlWebpackPlugin({
|
||||
filename: '../test.html'
|
||||
})]
|
||||
}, ['<script type="text/javascript" src="app/index_bundle.js"'], 'test.html', done);
|
||||
}, ['<script src="app/index_bundle.js"'], 'test.html', done);
|
||||
});
|
||||
|
||||
it('will try to use a relative name if the filename is in a subdirectory', function (done) {
|
||||
|
|
@ -642,7 +642,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
filename: 'index_bundle.js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin({filename: 'assets/test.html'})]
|
||||
}, ['<script type="text/javascript" src="../index_bundle.js"'], 'assets/test.html', done);
|
||||
}, ['<script src="../index_bundle.js"'], 'assets/test.html', done);
|
||||
});
|
||||
|
||||
it('will try to use a relative name if the filename and the script are in a subdirectory', function (done) {
|
||||
|
|
@ -653,7 +653,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
filename: 'assets/index_bundle.js'
|
||||
},
|
||||
plugins: [new HtmlWebpackPlugin({filename: 'assets/demo/test.html'})]
|
||||
}, ['<script type="text/javascript" src="../../assets/index_bundle.js"'], 'assets/demo/test.html', done);
|
||||
}, ['<script src="../../assets/index_bundle.js"'], 'assets/demo/test.html', done);
|
||||
});
|
||||
|
||||
it('allows you write multiple HTML files', function (done) {
|
||||
|
|
@ -676,7 +676,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
template: path.join(__dirname, 'fixtures/test.html')
|
||||
})
|
||||
]
|
||||
}, ['<script type="text/javascript" src="index_bundle.js"'], null, function () {
|
||||
}, ['<script src="index_bundle.js"'], null, function () {
|
||||
expect(fs.existsSync(path.join(OUTPUT_DIR, 'second-file.html'))).toBe(true);
|
||||
expect(fs.existsSync(path.join(OUTPUT_DIR, 'third-file.html'))).toBe(true);
|
||||
done();
|
||||
|
|
@ -700,7 +700,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
new HtmlWebpackPlugin({template: path.join(__dirname, 'fixtures/empty_html.html')}),
|
||||
new ExtractTextPlugin('styles.css')
|
||||
]
|
||||
}, ['<link href="styles.css"', '<script type="text/javascript" src="index_bundle.js"'], null, done);
|
||||
}, ['<link href="styles.css"', '<script src="index_bundle.js"'], null, done);
|
||||
});
|
||||
|
||||
it('exposes the webpack configuration to templates', function (done) {
|
||||
|
|
@ -750,6 +750,36 @@ describe('HtmlWebpackPlugin', function () {
|
|||
}, false, true);
|
||||
});
|
||||
|
||||
it('passes chunks to the html-webpack-plugin-alter-asset-tags event', function (done) {
|
||||
var chunks;
|
||||
var examplePlugin = {
|
||||
apply: function (compiler) {
|
||||
compiler.plugin('compilation', function (compilation) {
|
||||
compilation.plugin('html-webpack-plugin-alter-asset-tags', function (object, callback) {
|
||||
chunks = object.chunks;
|
||||
callback();
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
testHtmlPlugin({
|
||||
entry: {
|
||||
app: path.join(__dirname, 'fixtures/index.js')
|
||||
},
|
||||
output: {
|
||||
path: OUTPUT_DIR,
|
||||
filename: '[name]_bundle.js'
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin(),
|
||||
examplePlugin
|
||||
]
|
||||
}, [], null, function () {
|
||||
expect(chunks).toBeDefined();
|
||||
done();
|
||||
}, false, true);
|
||||
});
|
||||
|
||||
it('allows events to add a no-value attribute', function (done) {
|
||||
var examplePlugin = {
|
||||
apply: function (compiler) {
|
||||
|
|
@ -779,7 +809,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
examplePlugin
|
||||
]
|
||||
},
|
||||
[/<body>[\s]*<script type="text\/javascript" src="app_bundle.js" async><\/script>[\s]*<\/body>/],
|
||||
[/<body>[\s]*<script src="app_bundle.js" async><\/script>[\s]*<\/body>/],
|
||||
null, done, false, false);
|
||||
});
|
||||
|
||||
|
|
@ -812,7 +842,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
examplePlugin
|
||||
]
|
||||
},
|
||||
[/<body>[\s]*<script type="text\/javascript" src="app_bundle.js"><\/script>[\s]*<\/body>/],
|
||||
[/<body>[\s]*<script src="app_bundle.js"><\/script>[\s]*<\/body>/],
|
||||
null, done, false, false);
|
||||
});
|
||||
|
||||
|
|
@ -1107,7 +1137,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
new HtmlWebpackPlugin(),
|
||||
examplePlugin
|
||||
]
|
||||
}, ['Injected by plugin', '<script type="text/javascript" src="funky-script.js"'], null, function () {
|
||||
}, ['Injected by plugin', '<script src="funky-script.js"'], null, function () {
|
||||
expect(eventFired).toBe(true);
|
||||
done();
|
||||
}, false, true);
|
||||
|
|
@ -1141,7 +1171,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
}),
|
||||
examplePlugin
|
||||
]
|
||||
}, ['<script type="text/javascript" src="funky-script.js"'], null, function () {
|
||||
}, ['<script src="funky-script.js"'], null, function () {
|
||||
expect(eventFired).toBe(true);
|
||||
done();
|
||||
});
|
||||
|
|
@ -1167,8 +1197,8 @@ describe('HtmlWebpackPlugin', function () {
|
|||
new HtmlWebpackPlugin()
|
||||
]
|
||||
}, [
|
||||
/<script type="text\/javascript" src="common_bundle.js">[\s\S]*<script type="text\/javascript" src="util_bundle.js">/,
|
||||
/<script type="text\/javascript" src="common_bundle.js"[\s\S]*<script type="text\/javascript" src="index_bundle.js">/], null, done);
|
||||
/<script src="common_bundle.js">[\s\S]*<script src="util_bundle.js">/,
|
||||
/<script src="common_bundle.js"[\s\S]*<script src="index_bundle.js">/], null, done);
|
||||
});
|
||||
|
||||
it('adds a favicon', function (done) {
|
||||
|
|
@ -1364,7 +1394,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
})
|
||||
]
|
||||
}, [
|
||||
/<script type="text\/javascript" src="common_bundle.js">.+<script type="text\/javascript" src="util_bundle.js">.+<script type="text\/javascript" src="index_bundle.js">/], null, done);
|
||||
/<script src="common_bundle.js">.+<script src="util_bundle.js">.+<script src="index_bundle.js">/], null, done);
|
||||
});
|
||||
|
||||
it('should sort the chunks in custom (reverse alphabetical) order', function (done) {
|
||||
|
|
@ -1391,7 +1421,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
}
|
||||
})
|
||||
]
|
||||
}, [/<script type="text\/javascript" src="c_bundle.js">.+<script type="text\/javascript" src="b_bundle.js">.+<script type="text\/javascript" src="a_bundle.js">/], null, done);
|
||||
}, [/<script src="c_bundle.js">.+<script src="b_bundle.js">.+<script src="a_bundle.js">/], null, done);
|
||||
});
|
||||
|
||||
it('should sort the chunks by chunk dependencies', function (done) {
|
||||
|
|
@ -1419,7 +1449,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
})
|
||||
]
|
||||
}, [
|
||||
/<script type="text\/javascript" src="common_bundle.js">.+<script type="text\/javascript" src="aTheme_bundle.js">.+<script type="text\/javascript" src="util_bundle.js">/], null, done);
|
||||
/<script src="common_bundle.js">.+<script src="aTheme_bundle.js">.+<script src="util_bundle.js">/], null, done);
|
||||
});
|
||||
|
||||
it('should sort the chunks by chunk dependencies even if a parent chunk is excluded', function (done) {
|
||||
|
|
@ -1448,7 +1478,7 @@ describe('HtmlWebpackPlugin', function () {
|
|||
})
|
||||
]
|
||||
}, [
|
||||
/<script type="text\/javascript" src="aTheme_bundle.js">.+<script type="text\/javascript" src="util_bundle.js">/], null, done);
|
||||
/<script src="aTheme_bundle.js">.+<script src="util_bundle.js">/], null, done);
|
||||
});
|
||||
|
||||
it('should add the webpack compilation object as a property of the templateParam object', function (done) {
|
||||
|
|
@ -1478,6 +1508,6 @@ describe('HtmlWebpackPlugin', function () {
|
|||
templateContent: ''
|
||||
})]
|
||||
},
|
||||
[/^<script type="text\/javascript" src="app_bundle\.js"><\/script>$/], null, done);
|
||||
[/^<script src="app_bundle\.js"><\/script>$/], null, done);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -44,6 +44,10 @@ function runExample (exampleName, done) {
|
|||
|
||||
expect(err).toBeFalsy();
|
||||
expect(res.same).toBe(true);
|
||||
if (!res.same) {
|
||||
console.log(
|
||||
console.log(exampleName, res));
|
||||
}
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Some unique text</p>
|
||||
<script type="text/javascript" src="<%=foo.bar%>"></script>
|
||||
<script src="<%=foo.bar%>"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Some unique text</p>
|
||||
<script type="text/javascript" src="{%=o.htmlWebpackPlugin.assets.app%}"></script>
|
||||
<script src="{%=o.htmlWebpackPlugin.assets.app%}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
doctype html
|
||||
html
|
||||
head
|
||||
meta(http-equiv="Content-type" content="text/html; charset=utf-8")
|
||||
meta(charset="utf-8")
|
||||
title Demo
|
||||
body
|
||||
p Some unique text
|
||||
each jsFile in htmlWebpackPlugin.files.js
|
||||
script(type="text/javascript" src!=jsFile)
|
||||
script(src!=jsFile)
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Some unique text</p>
|
||||
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.app.entry%>"></script>
|
||||
<script src="<%=htmlWebpackPlugin.files.chunks.app.entry%>"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Public path is <%= webpackConfig.output.publicPath %></p>
|
||||
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.app.entry %>?<%= htmlWebpackPlugin.files.chunks.app.hash %>"></script>
|
||||
<script src="<%= htmlWebpackPlugin.files.chunks.app.entry %>?<%= htmlWebpackPlugin.files.chunks.app.hash %>"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue