gwuhaolin · HexMox · Aug 20, 2018 · Aug 20, 2018 · Aug 22, 2018 · Aug 22, 2018
diff --git a/demo/auto-plugin-use-template/README.md b/demo/auto-plugin-use-template/README.md
@@ -0,0 +1,66 @@
+# 管理多个单页应用
+
+`AutoWebPlugin` 可以自动管理多个单页应用。简单使用如下
+
+```js
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { AutoWebPlugin } = require('../../index');
+
+const autoWebPlugin = new AutoWebPlugin('./src/', {
+	ignorePages: ['ignore'],
+	template: './src/template.html',
+	outputPagemap: true,
+});
+
+module.exports = {
+	output: {
+		path: path.resolve(__dirname, 'dist'),
+		filename: '[name].js',
+		publicPath: 'https://cdn.cn/',
+	},
+	entry: autoWebPlugin.entry({
+		ie_polyfill: './src/ie_polyfill',
+		polyfill: './src/polyfill',
+	}),
+	optimization: {
+		splitChunks: {
+			minSize: 0,
+			cacheGroups: {
+				commons: {
+					chunks: 'initial',
+					name: 'common',
+					minChunks: 2,
+				},
+			},
+		},
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				loader: [MiniCssExtractPlugin.loader, 'css-loader'],
+			},
+		],
+	},
+	plugins: [
+		new MiniCssExtractPlugin({
+			filename: '[name].css',
+		}),
+		autoWebPlugin,
+	],
+};
+```
+
+以上配置会让`AutoWebPlugin`找出`./src/`目录下的所有目录，为每个目录生产一个 HTML 作为单页应用的入口。
+
+* `ignorePages` 属性用了忽略名叫`ignore`的目录，不为这个目录生产 HTML 入口
+* `template` 属性指出所有单页应用生产 HTML 入口时公用的 HTML 模版，模版语法和`WebPlugin`里一致。
+* `outputPagemap` 属性用来输出一个叫`pagemap.json`的文件，里面存放了`AutoWebPlugin`找出的所有单页应用的名称和 URL 的映射关系。
+
+`AutoWebPlugin`还支持很多配置选项，你可以[在这里看到](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/lib/AutoWebPlugin.js#L33)。
+
+更多关于`AutoWebPlugin`的资料可以参考以下文章：
+
+* [webpack 原理与实战](https://github.com/gwuhaolin/blog/issues/4)
+* [webpack2 终极优化](https://github.com/gwuhaolin/blog/issues/2)
diff --git a/demo/auto-plugin-use-template/dist-js-prod/common.css b/demo/auto-plugin-use-template/dist-js-prod/common.css
@@ -0,0 +1,4 @@
+body {
+	color: red;
+}
+
diff --git a/demo/auto-plugin-use-template/dist-js-prod/common.js b/demo/auto-plugin-use-template/dist-js-prod/common.js
diff --git a/demo/auto-plugin-use-template/dist-js-prod/home.css b/demo/auto-plugin-use-template/dist-js-prod/home.css
@@ -0,0 +1,4 @@
+body {
+	background-color: red;
+}
+
diff --git a/demo/auto-plugin-use-template/dist-js-prod/home.html b/demo/auto-plugin-use-template/dist-js-prod/home.html
@@ -0,0 +1,20 @@
+
+<!DOCTYPE html>
+<html lang="zh-cn">
+<head>
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<!--只在IE下注入ie_polyfill-->
+	<!--[if IE]><script src="https://cdn.cn/ie_polyfill.js"></script><![endif]-->
+	<!--开发模式下不注入polyfill-->
+	<!--<script src="polyfill?_dist&amp;_inline"></script>-->
+	<link rel="stylesheet" href="https://cdn.cn/common.css">
+<link rel="stylesheet" href="https://cdn.cn/home.css">
+</head>
+<body>
+<script src="https://cdn.cn/common.js"></script>
+
+<script src="https://cdn.cn/home.js"></script>
+</body>
+</html>
diff --git a/demo/auto-plugin-use-template/dist-js-prod/home.js b/demo/auto-plugin-use-template/dist-js-prod/home.js
diff --git a/demo/auto-plugin-use-template/dist-js-prod/ie_polyfill.js b/demo/auto-plugin-use-template/dist-js-prod/ie_polyfill.js
diff --git a/demo/auto-plugin-use-template/dist-js-prod/login.css b/demo/auto-plugin-use-template/dist-js-prod/login.css
@@ -0,0 +1,4 @@
+body {
+	background-color: blue;
+}
+
diff --git a/demo/auto-plugin-use-template/dist-js-prod/login.html b/demo/auto-plugin-use-template/dist-js-prod/login.html
@@ -0,0 +1,20 @@
+
+<!DOCTYPE html>
+<html lang="zh-cn">
+<head>
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<!--只在IE下注入ie_polyfill-->
+	<!--[if IE]><script src="https://cdn.cn/ie_polyfill.js"></script><![endif]-->
+	<!--开发模式下不注入polyfill-->
+	<!--<script src="polyfill?_dist&amp;_inline"></script>-->
+	<link rel="stylesheet" href="https://cdn.cn/common.css">
+<link rel="stylesheet" href="https://cdn.cn/login.css">
+</head>
+<body>
+<script src="https://cdn.cn/common.js"></script>
+
+<script src="https://cdn.cn/login.js"></script>
+</body>
+</html>
diff --git a/demo/auto-plugin-use-template/dist-js-prod/login.js b/demo/auto-plugin-use-template/dist-js-prod/login.js
diff --git a/demo/auto-plugin-use-template/dist-js-prod/pagemap.json b/demo/auto-plugin-use-template/dist-js-prod/pagemap.json
@@ -0,0 +1 @@
+{"home":"https://cdn.cn/home.html","login":"https://cdn.cn/login.html","signup":"https://cdn.cn/signup.html"}
diff --git a/demo/auto-plugin-use-template/dist-js-prod/polyfill.js b/demo/auto-plugin-use-template/dist-js-prod/polyfill.js
diff --git a/demo/auto-plugin-use-template/dist-js-prod/signup.css b/demo/auto-plugin-use-template/dist-js-prod/signup.css
@@ -0,0 +1,4 @@
+body {
+	background-color: yellow;
+}
+
diff --git a/demo/auto-plugin-use-template/dist-js-prod/signup.html b/demo/auto-plugin-use-template/dist-js-prod/signup.html
@@ -0,0 +1,20 @@
+
+<!DOCTYPE html>
+<html lang="zh-cn">
+<head>
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<!--只在IE下注入ie_polyfill-->
+	<!--[if IE]><script src="https://cdn.cn/ie_polyfill.js"></script><![endif]-->
+	<!--开发模式下不注入polyfill-->
+	<!--<script src="polyfill?_dist&amp;_inline"></script>-->
+	<link rel="stylesheet" href="https://cdn.cn/common.css">
+<link rel="stylesheet" href="https://cdn.cn/signup.css">
+</head>
+<body>
+<script src="https://cdn.cn/common.js"></script>
+
+<script src="https://cdn.cn/signup.js"></script>
+</body>
+</html>
diff --git a/demo/auto-plugin-use-template/dist-js-prod/signup.js b/demo/auto-plugin-use-template/dist-js-prod/signup.js
diff --git a/demo/auto-plugin-use-template/dist/common.css b/demo/auto-plugin-use-template/dist/common.css
@@ -0,0 +1,4 @@
+body {
+	color: red;
+}
+
diff --git a/demo/auto-plugin-use-template/dist/common.js b/demo/auto-plugin-use-template/dist/common.js
diff --git a/demo/auto-plugin-use-template/dist/home.css b/demo/auto-plugin-use-template/dist/home.css
@@ -0,0 +1,4 @@
+body {
+	background-color: red;
+}
+
diff --git a/demo/auto-plugin-use-template/dist/home.html b/demo/auto-plugin-use-template/dist/home.html
@@ -0,0 +1,13 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+<link rel="stylesheet" href="https://cdn.cn/home.css">
+</head>
+<body>
+<script src="https://cdn.cn/home.js"></script>
+
+
+</body>
+</html>
diff --git a/demo/auto-plugin-use-template/dist/home.js b/demo/auto-plugin-use-template/dist/home.js
diff --git a/demo/auto-plugin-use-template/dist/ie_polyfill.js b/demo/auto-plugin-use-template/dist/ie_polyfill.js
diff --git a/demo/auto-plugin-use-template/dist/login.css b/demo/auto-plugin-use-template/dist/login.css
@@ -0,0 +1,4 @@
+body {
+	background-color: blue;
+}
+
diff --git a/demo/auto-plugin-use-template/dist/login.html b/demo/auto-plugin-use-template/dist/login.html
@@ -0,0 +1,13 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+<link rel="stylesheet" href="https://cdn.cn/login.css">
+</head>
+<body>
+<script src="https://cdn.cn/login.js"></script>
+
+
+</body>
+</html>
diff --git a/demo/auto-plugin-use-template/dist/login.js b/demo/auto-plugin-use-template/dist/login.js
diff --git a/demo/auto-plugin-use-template/dist/pagemap.json b/demo/auto-plugin-use-template/dist/pagemap.json
@@ -0,0 +1 @@
+{"home":"https://cdn.cn/home.html","login":"https://cdn.cn/login.html","signup":"https://cdn.cn/signup.html"}
diff --git a/demo/auto-plugin-use-template/dist/polyfill.js b/demo/auto-plugin-use-template/dist/polyfill.js
diff --git a/demo/auto-plugin-use-template/dist/signup.css b/demo/auto-plugin-use-template/dist/signup.css
@@ -0,0 +1,4 @@
+body {
+	background-color: yellow;
+}
+
diff --git a/demo/auto-plugin-use-template/dist/signup.html b/demo/auto-plugin-use-template/dist/signup.html
@@ -0,0 +1,13 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+<link rel="stylesheet" href="https://cdn.cn/signup.css">
+</head>
+<body>
+<script src="https://cdn.cn/signup.js"></script>
+
+
+</body>
+</html>
diff --git a/demo/auto-plugin-use-template/dist/signup.js b/demo/auto-plugin-use-template/dist/signup.js
diff --git a/demo/auto-plugin-use-template/src/home/index.css b/demo/auto-plugin-use-template/src/home/index.css
@@ -0,0 +1,3 @@
+body {
+	background-color: red;
+}
diff --git a/demo/auto-plugin-use-template/src/home/index.js b/demo/auto-plugin-use-template/src/home/index.js
@@ -0,0 +1,4 @@
+require('./index.css');
+require('../ignore');
+require('../ignore/index.css');
+alert('page home');
diff --git a/demo/auto-plugin-use-template/src/ie_polyfill.js b/demo/auto-plugin-use-template/src/ie_polyfill.js
@@ -0,0 +1 @@
+alert('ie_polyfill');
diff --git a/demo/auto-plugin-use-template/src/ignore/index.css b/demo/auto-plugin-use-template/src/ignore/index.css
@@ -0,0 +1,3 @@
+body {
+	color: red;
+}
diff --git a/demo/auto-plugin-use-template/src/ignore/index.js b/demo/auto-plugin-use-template/src/ignore/index.js
@@ -0,0 +1 @@
+console.error('this dir should be ingore by AutoWebPlugin');
diff --git a/demo/auto-plugin-use-template/src/login/index.css b/demo/auto-plugin-use-template/src/login/index.css
@@ -0,0 +1,3 @@
+body {
+	background-color: blue;
+}
diff --git a/demo/auto-plugin-use-template/src/login/index.js b/demo/auto-plugin-use-template/src/login/index.js
@@ -0,0 +1,4 @@
+require('./index.css');
+require('../ignore');
+require('../ignore/index.css');
+alert('page login');
diff --git a/demo/auto-plugin-use-template/src/polyfill.js b/demo/auto-plugin-use-template/src/polyfill.js
@@ -0,0 +1 @@
+alert('polyfill');
diff --git a/demo/auto-plugin-use-template/src/signup/index.css b/demo/auto-plugin-use-template/src/signup/index.css
@@ -0,0 +1,3 @@
+body {
+	background-color: yellow;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"home":"https://cdn.cn/home.html","login":"https://cdn.cn/login.html","signup":"https://cdn.cn/signup.html"}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		console.error('this dir should be ingore by AutoWebPlugin');