feat: add htmlMinify option

gwuhaolin · Jul 20, 2017 · a961420 · a961420
1 parent cd2e23b
commit a961420
Show file tree

Hide file tree

Showing 12 changed files with 293 additions and 12 deletions.
diff --git a/demo/minify-html/README.md b/demo/minify-html/README.md
@@ -0,0 +1,24 @@
+# 使用HTML模版配置资源注入到HTML
+通过配置webpack的entry，webpack为我们生产了一系列chunk。但是我们需要把这些chunk注入到HTML里才可以在浏览器里运行起来。
+`WebPlugin`可以方便的帮你把chunk注入到HTML里。
+```js
+        new WebPlugin({
+          filename: 'index.html',
+          template: './template.html',
+          requires: ['A', 'B'],
+        }),
+```
+
+
+使用HTML模版可以更细粒度的控制chunk的注入位置。同时你还可以控制每个chunk注入到HTML里的方式，通过`?_inline&_dev`这样querystring的方式来配置属性。
+
+支持以下注入方式
+- `_dist` 只有在生产环境下才引入该资源
+- `_dev` 只有在开发环境下才引入该资源
+- `_inline` 把该资源的内容潜入到html里
+- `_ie` 只有IE浏览器才需要引入的资源，通过 `[if IE]>resource<![endif]` 注释实现
+
+
+通过`requires`属性可以指明这个页面依赖哪些chunk，如果你在HTML模版里没有注入完`requires`指明的所有chunk，那么`WebPlugin`会自动找出剩下遗漏的部分帮你补充进去，补充的方式如下
+- 剩余的所有JS注入到 `<!--SCRIPT-->` 所在的位置，`<!--SCRIPT-->` 不存在是注入到BODY标签的最后。
+- 剩余的所有CSS注入到 `<!--STYLE-->` 所在的位置，`<!--STYLE-->` 不存在是注入到HEAD标签的最后。
diff --git a/demo/minify-html/a.js b/demo/minify-html/a.js
@@ -0,0 +1,7 @@
+function f(x) {
+	console.log(x);
+}
+
+let x = 'hello web-webpack-plugin from a';
+
+f(x);
diff --git a/demo/minify-html/dist/A.js b/demo/minify-html/dist/A.js
@@ -0,0 +1,79 @@
+/******/ (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] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = 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;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+function f(x) {
+	console.log(x);
+}
+
+let x = 'hello web-webpack-plugin from a';
+
+f(x);
+
+/***/ })
+/******/ ]);
diff --git a/demo/minify-html/dist/index.html b/demo/minify-html/dist/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html><html lang="zh-cn"><head>
+	<meta charset="UTF-8">
+	<!--load a local reset style file direct without local var webpack-->
+	<style rel="stylesheet">body {
+	background-color: rebeccapurple;
+}
+
+a {
+	margin: 0;
+	background-color: #ffffff;
+}</style>
+</head>
+<body>
+<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] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = 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;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+function f(x) {
+	console.log(x);
+}
+
+let x = 'hello web-webpack-plugin from a';
+
+f(x);
+
+/***/ })
+/******/ ]);</script>
+<footer>web-webpack-plugin</footer>
+
+</body></html>
diff --git a/demo/minify-html/reset.min.css b/demo/minify-html/reset.min.css
@@ -0,0 +1,8 @@
+body {
+	background-color: rebeccapurple;
+}
+
+a {
+	margin: 0;
+	background-color: #ffffff;
+}
diff --git a/demo/minify-html/template.html b/demo/minify-html/template.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+<head>
+	<meta charset="UTF-8">
+	<!--load a local reset style file direct without local var webpack-->
+	<link rel="stylesheet" href="./reset.min.css?_inline">
+</head>
+<body>
+<script src="A?_inline"></script>
+<footer>web-webpack-plugin</footer>
+</body>
+</html>
diff --git a/demo/minify-html/webpack.config.js b/demo/minify-html/webpack.config.js
@@ -0,0 +1,24 @@
+const path = require('path');
+const { WebPlugin } = require('../../index');
+const { minify } = require('html-minifier');
+
+module.exports = {
+	output: {
+		path: path.resolve(__dirname, 'dist'),
+		filename: '[name].js',
+	},
+	entry: {
+		A: './a',
+	},
+	plugins: [
+		new WebPlugin({
+			filename: 'index.html',
+			template: './template.html',
+			htmlMinify: (orgHTML) => {
+				return minify(orgHTML, {
+					minifyJS: true,
+				});
+			}
+		}),
+	]
+};
diff --git a/lib/AutoWebPlugin.js b/lib/AutoWebPlugin.js
@@ -139,7 +139,7 @@ class AutoWebPlugin {
 		global._isExtractStyle = util.isExtractStyle(compiler);
 		const { options: compilerOptions } = compiler;
 		const { entryMap } = this;
-		const { commonsChunk, stylePublicPath, outputPagemap } = this.options;
+		const { commonsChunk, stylePublicPath, outputPagemap, htmlMinify } = this.options;
 
 		const useCommonsChunk = commonsChunk !== null && typeof commonsChunk === 'object';
 
@@ -157,6 +157,7 @@ class AutoWebPlugin {
 				filename: `${pageName}.html`,
 				requires: useCommonsChunk ? [commonsChunk.name, pageName] : [pageName],
 				stylePublicPath,
+				htmlMinify,
 			}).apply(compiler);
 		});
 

diff --git a/lib/HTMLDocument.js b/lib/HTMLDocument.js
@@ -232,11 +232,21 @@ class HTMLDocument {
 	 * @returns {string}
 	 */
 	serialize() {
-		if (global._isProduction) {
+		const { htmlMinify } = this.options;
+		if (htmlMinify === undefined) {
+			if (global._isProduction) {
+				util.minifyParse5Node(this.document);
+			} else {
+				util.prettyParse5Node(this.document);
+			}
+		} else if (htmlMinify === true) {
 			util.minifyParse5Node(this.document);
-		} else {
+		} else if (htmlMinify === false) {
 			util.prettyParse5Node(this.document);
+		} else if (typeof htmlMinify === 'function') {
+			return htmlMinify(parse5.serialize(this.document));
 		}
+
 		return parse5.serialize(this.document);
 	}
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "web-webpack-plugin",
-	"version": "1.8.5",
+	"version": "1.9.0",
 	"description": "web plugin for webpack, alternatives for html-webpack-plugin, use HTML as entry",
 	"keywords": [
 		"webpack",
@@ -26,6 +26,7 @@
 		"demo:out-html": "cd demo/out-html && rm -rf dist && webpack && cd ../../",
 		"demo:issue6": "cd demo/issue6 && rm -rf dist && webpack && cd ../../",
 		"demo:use-template": "cd demo/use-template && rm -rf dist && webpack && cd ../../",
+		"demo:minify-html": "cd demo/minify-html && rm -rf dist && webpack && cd ../../",
 		"demo:use-template-complier": "cd demo/use-template-complier && rm -rf dist && webpack && cd ../../",
 		"demo:watch-template-complier": "cd demo/use-template-complier && rm -rf dist && webpack -w && cd ../../",
 		"demo:watch-template": "cd demo/watch-template && rm -rf dist && webpack -w && cd ../../",
@@ -36,7 +37,7 @@
 		"demo:pre-post-entrys": "cd demo/pre-post-entrys && rm -rf dist && webpack && cd ../../",
 		"demo:hmr": "cd demo/hmr && webpack-dev-server --hot",
 		"demo:load-local-file": "cd demo/load-local-file && rm -rf dist && rm -rf dist-prod && webpack && webpack -p --output-path dist-prod --config webpack-prod.config.js && cd ../../",
-		"demo": "npm run demo:auto-plugin && npm run demo:load-local-file && npm run demo:config-resource && npm run demo:issue6 && npm run demo:out-html && npm run demo:use-template && npm run demo:use-template-complier && npm run demo:extract-css && npm run demo:public-path && npm run demo:pre-post-entrys && npm run demo:relative-path && npm run demo:relative-path-public-path && cd ../../",
+		"demo": "npm run demo:auto-plugin && npm run demo:load-local-file && npm run demo:minify-html && npm run demo:config-resource && npm run demo:issue6 && npm run demo:out-html && npm run demo:use-template && npm run demo:use-template-complier && npm run demo:extract-css && npm run demo:public-path && npm run demo:pre-post-entrys && npm run demo:relative-path && npm run demo:relative-path-public-path && cd ../../",
 		"test": "node test.js"
 	},
 	"license": "ISC",
@@ -48,11 +49,12 @@
 	"devDependencies": {
 		"css-loader": "^0.28.4",
 		"ejs": "^2.5.6",
-		"eslint": "^4.1.1",
-		"extract-text-webpack-plugin": "^3.0.0-beta.3",
+		"eslint": "^4.2.0",
+		"extract-text-webpack-plugin": "^3.0.0",
 		"file-loader": "^0.11.2",
-		"husky": "^0.14.1",
+		"html-minifier": "^3.5.2",
+		"husky": "^0.14.3",
 		"style-loader": "^0.18.2",
-		"webpack-dev-server": "^2.5.0"
+		"webpack-dev-server": "^2.5.1"
 	}
 }
diff --git a/readme.md b/readme.md
@@ -444,8 +444,16 @@ module.exports = {
 └── index.html
 ``` 
 
-
-
+## minify output html [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/minify-html)
+`WebPlugin` and `AutoWebPlugin` support `htmlMinify` options to minify output html use the following rules:
+- if `htmlMinify` is set
+	- if `htmlMinify` is `true`, builtin html minify function will used to minify output html(minify HTML only，not CSS or JS)
+	- if `htmlMinify` is `false`, builtin html pretty function will used to output human read friendly html
+	- if `htmlMinify` is a `function`,use this function `function(orgHTMLString)=>minifyHTMLString` to minify html
+- if `htmlMinify` is missing(`undefined`)
+	- if environment is `production`, builtin html minify function will used to minify output html(minify HTML only，not CSS or JS)
+  - if environment is not `production`, builtin html pretty function will used to output human read friendly html
+
 # Distinguish the environment
 This plugin takes into account both **development** environment and **production** environment. And only if `process.env.NODE_ENV = production` current environment is **production** environment, others are considered to be development environment.
 `webpack -p` will use DefinePlugin define `NODE_ENV=production`。

diff --git a/readme_zh.md b/readme_zh.md
@@ -427,7 +427,18 @@ module.exports = {
 └── index.html
 ```
 
-
+## 压缩输出的HTML [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/minify-html)
+`WebPlugin` 和 `AutoWebPlugin` 支持 `htmlMinify` 选项去配置压缩输出HTML的规则，规则如下：
+- 如果设置了`htmlMinify`选项：
+	- 如果`htmlMinify`是`true`, 使用内置的HTML压缩函数去压缩输出的HTML（只会压缩HTML，不会压缩JS和CSS）
+	- 如果`htmlMinify`是`false`, 使用内置的HTML处理函数去输出让人看上去舒服的HTML
+	- 如果`htmlMinify`是一个`function`,使用你提供的函数`function(orgHTMLString)=>minifyHTMLString`去处理
+- 如果没设置`htmlMinify`选项：
+	- 如果当前环境是`production`, 使用内置的HTML压缩函数去压缩输出的HTML（只会压缩HTML，不会压缩JS和CSS）
+  - 如果当前环境不是`production`, 使用内置的HTML处理函数去输出让人看上去舒服的HTML
+
+
+
 # 区分环境
 这个插件会考虑 **开发环境** 和 **生产环境** 两种情况。有且仅当`process.env.NODE_ENV = production`是才认为当前环境是 **生产环境**，其它的都认为是开发环境。
 `webpack -p` 参数会通过 DefinePlugin 定义 `NODE_ENV=production`。