Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enable minification by default when 'mode' is production #1048

Merged
merged 2 commits into from
Sep 17, 2018
Merged

Enable minification by default when 'mode' is production #1048

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b47733a
Enable minification by default when 'mode' is production
edmorley Sep 15, 2018
95cc1e2
Address review comments
edmorley Sep 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ Allowed values are as follows
|**[`inject`](#)**|`{Boolean\|String}`|`true`|`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`](#)**|`{String}`|``|Adds the given favicon path to the output HTML|
|**[`meta`](#)**|`{Object}`|`{}`|Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`|
|**[`minify`](#)**|`{Boolean\|Object}`|`false`|Pass [html-minifier](https://github.com/kangax/html-minifier#options-quick-reference)'s options as object to minify the output|
|**[`minify`](#)**|`{Boolean\|Object}`|`true` if `mode` is `'production'`, otherwise `false`|Controls if and in what ways the output should be minified. See [minification](#minification) below for more details.|
|**[`hash`](#)**|`{Boolean}`|`false`|If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files. This is useful for cache busting|
|**[`cache`](#)**|`{Boolean}`|`true`|Emit the file only if it was changed|
|**[`showErrors`](#)**|`{Boolean}`|`true`|Errors details will be written into the HTML page|
Expand Down Expand Up @@ -285,6 +285,26 @@ plugins: [
]
```

### Minification

If the `minify` option is set to `true` (the default when webpack's `mode` is `'production'`),
the generated HTML will be minified using [html-minifier](https://github.com/kangax/html-minifier)
and the following options:

```js
{
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
}
```

To use custom [html-minifier options](https://github.com/kangax/html-minifier#options-quick-reference)
pass an object to `minify` instead. This object will not be merged with the defaults above.

### `Events`

To allow other [plugins](https://github.com/webpack/docs/wiki/plugins) to alter the HTML this plugin executes
Expand Down
2 changes: 1 addition & 1 deletion examples/appcache/dist/webpack-4/manifest.appcache
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
CACHE MANIFEST
# a351a7eb0665a7fa27b3
# 83ab7029cec7797a5a8a

0714810ae3fb211173e2964249507195.png
bundle.js
Expand Down
10 changes: 1 addition & 9 deletions examples/chunk-optimization/dist/webpack-4/entryA.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body>
<script src="libMath.js"></script><script src="libText.js"></script><script src="vendors~entryA~entryB.js"></script><script src="entryA~entryB.js"></script><script src="entryA.js"></script></body>
</html>
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script src="libMath.js"></script><script src="libText.js"></script><script src="vendors~entryA~entryB.js"></script><script src="entryA~entryB.js"></script><script src="entryA.js"></script></body></html>
10 changes: 1 addition & 9 deletions examples/chunk-optimization/dist/webpack-4/entryB.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body>
<script src="libMath.js"></script><script src="vendors~entryA~entryB.js"></script><script src="entryA~entryB.js"></script><script src="entryB.js"></script></body>
</html>
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script src="libMath.js"></script><script src="vendors~entryA~entryB.js"></script><script src="entryA~entryB.js"></script><script src="entryB.js"></script></body></html>
10 changes: 1 addition & 9 deletions examples/chunk-optimization/dist/webpack-4/entryC.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body>
<script src="libMath.js"></script><script src="libText.js"></script><script src="vendors~entryA~entryB.js"></script><script src="entryA~entryB.js"></script><script src="entryA.js"></script><script src="entryB.js"></script></body>
</html>
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script src="libMath.js"></script><script src="libText.js"></script><script src="vendors~entryA~entryB.js"></script><script src="entryA~entryB.js"></script><script src="entryA.js"></script><script src="entryB.js"></script></body></html>
13 changes: 1 addition & 12 deletions examples/custom-template/dist/webpack-4/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles.css" rel="stylesheet"></head>
<body>
<h2>Partial</h2>
<img src="0714810ae3fb211173e2964249507195.png">
<script src="bundle.js"></script></body>
</html>
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="styles.css" rel="stylesheet"></head><body><h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
10 changes: 1 addition & 9 deletions examples/default/dist/webpack-4/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body>
<script src="bundle.js"></script></body>
</html>
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script src="bundle.js"></script></body></html>
10 changes: 1 addition & 9 deletions examples/favicon/dist/webpack-4/favicon.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HtmlWebpackPlugin example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head>
<body>
<script src="bundle.js"></script></body>
</html>
<!doctype html><html><head><meta charset="utf-8"><title>HtmlWebpackPlugin example</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><script src="bundle.js"></script></body></html>
12 changes: 1 addition & 11 deletions examples/html-loader/dist/webpack-4/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head>
<body>
<img src="0714810ae3fb211173e2964249507195.png">
<script src="bundle.js"></script></body>
</html>
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
12 changes: 1 addition & 11 deletions examples/html-loader/dist/webpack-4/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head>
<body>
<img src="0714810ae3fb211173e2964249507195.png">
<script src="bundle.js"></script></body>
</html>
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
2 changes: 1 addition & 1 deletion examples/inline/dist/webpack-4/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><title>pug demo</title></head><body><style>body {
<!doctype html><html><head><meta charset="utf-8"><title>pug demo</title></head><body><style>body {
background: snow;
}</style><script>/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
Expand Down
3 changes: 1 addition & 2 deletions examples/javascript-advanced/dist/webpack-4/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
<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>
<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 changes: 1 addition & 2 deletions examples/javascript/dist/webpack-4/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
<head><link href="styles.css" rel="stylesheet"></head>Hello World from backend2018-07-10T06:35:32.858Z<h2>Partial</h2>
<img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script>
<head><link href="styles.css" rel="stylesheet"></head>Hello World from backend2018-09-15T20:52:24.239Z<h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script>
2 changes: 1 addition & 1 deletion examples/pug-loader/dist/webpack-4/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html><head><title>pug 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="#{require('./logo.png')}"></div><script src="bundle.js"></script></body></html>
<!doctype html><html><head><title>pug demo</title><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><div id="main"><div class="time"><b>Current time</b><p>1999-01-01T00:00:00.000Z</p></div><img src="#{require('./logo.png')}"></div><script src="bundle.js"></script></body></html>
12 changes: 1 addition & 11 deletions examples/sort-manually/dist/webpack-4/first-file.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1 @@
<!doctype html>
<html lang="en">
<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="a.js"></script><script src="b.js"></script><script src="c.js"></script></body>
</html>
<!doctype html><html lang="en"><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="a.js"></script><script src="b.js"></script><script src="c.js"></script></body></html>
12 changes: 1 addition & 11 deletions examples/sort-manually/dist/webpack-4/second-file.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1 @@
<!doctype html>
<html lang="en">
<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="a.js"></script><script src="b.js"></script><script src="d.js"></script></body>
</html>
<!doctype html><html lang="en"><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="a.js"></script><script src="b.js"></script><script src="d.js"></script></body></html>
10 changes: 1 addition & 9 deletions examples/template-parameters/dist/webpack-4/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bar</title>
</head>
<body>
<script src="bundle.js"></script></body>
</html>
<!doctype html><html><head><meta charset="utf-8"><title>bar</title></head><body><script src="bundle.js"></script></body></html>
17 changes: 15 additions & 2 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ class HtmlWebpackPlugin {
inject: true,
compile: true,
favicon: false,
minify: false,
minify: undefined,
cache: true,
showErrors: true,
chunks: 'all',
Expand Down Expand Up @@ -99,6 +99,19 @@ class HtmlWebpackPlugin {
this.options.filename = path.relative(compiler.options.output.path, filename);
}

const minify = this.options.minify;
if (minify === true || (minify === undefined && compiler.options.mode === 'production')) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please add the following code to make it easier to understand?

// Check if webpack is running in production mode 
// @see https://github.com/webpack/webpack/blob/3366421f1784c449f415cda5930a8e445086f688/lib/WebpackOptionsDefaulter.js#L12-L14
const isProductionLikeMode = compiler.options.mode === 'production' || !compiler.options.mode;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea :-)

this.options.minify = {
// https://github.com/kangax/html-minifier#options-quick-reference
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
};
}

// Clear the cache once a new HtmlWebpackPlugin is added
childCompiler.clearCache(compiler);

Expand Down Expand Up @@ -410,7 +423,7 @@ class HtmlWebpackPlugin {
? this.injectAssetsIntoHtml(html, assets, assetTags)
: html;
const htmlAfterMinification = this.options.minify
? require('html-minifier').minify(htmlAfterInjection, this.options.minify === true ? {} : this.options.minify)
? require('html-minifier').minify(htmlAfterInjection, this.options.minify)
: htmlAfterInjection;
return Promise.resolve(htmlAfterMinification);
}
Expand Down
Loading