Use HtmlWebpackPlugin gen demo html.

tangbc · tangbc · commit a458423eb9e1 · 2019-06-04T21:09:22.000+08:00
diff --git a/demos/demo.html b/demos/demo.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+    <meta charset="utf-8">
+    <title><%= htmlWebpackPlugin.options.title %> demo of vue-virtual-scroll-list</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
+</head>
+<body>
+<div id="app"></div>
+</body>
+</html>
diff --git a/demos/item-mode/index.html b/demos/item-mode/index.html
@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
 </head>
 <body>
-    <div id="app"></div>
-    <script src="build.js"></script>
-</body>
+<div id="app"></div>
+<script type="text/javascript" src="build.js"></script></body>
 </html>
diff --git a/demos/page-mode/index.html b/demos/page-mode/index.html
@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
 </head>
 <body>
-    <div id="app"></div>
-    <script src="build.js"></script>
-</body>
+<div id="app"></div>
+<script type="text/javascript" src="build.js"></script></body>
 </html>
diff --git a/demos/variable-height/index.html b/demos/variable-height/index.html
@@ -2,11 +2,10 @@
 <html lang="en-US">
 <head>
     <meta charset="utf-8">
-    <title>variable height demo of vue-virtual-scroll-list</title>
+    <title>variable-height demo of vue-virtual-scroll-list</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
 </head>
 <body>
-    <div id="app"></div>
-    <script src="build.js"></script>
-</body>
+<div id="app"></div>
+<script type="text/javascript" src="build.js"></script></body>
 </html>
diff --git a/demos/vfor-mode/index.html b/demos/vfor-mode/index.html
@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
 </head>
 <body>
-    <div id="app"></div>
-    <script src="build.js"></script>
-</body>
+<div id="app"></div>
+<script type="text/javascript" src="build.js"></script></body>
 </html>
diff --git a/demos/webpack.conf.js b/demos/webpack.conf.js
@@ -1,6 +1,7 @@
 const path = require('path')
 const { lstatSync, readdirSync } = require('fs')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 const isProduction = process.env.NODE_ENV === 'production'
 
@@ -15,6 +16,7 @@ let multiConfigs = []
 demoDirectorys.forEach((entry) => {
     const _entry = path.resolve(__dirname, entry)
     multiConfigs.push({
+        name: entry,
         entry: `${_entry}/main.js`,
         output: {
             filename: 'build.js',
@@ -43,7 +45,11 @@ module.exports = multiConfigs.map((config) => {
         },
 
         plugins: [
-            new VueLoaderPlugin()
+            new VueLoaderPlugin(),
+            new HtmlWebpackPlugin({
+                title: config.name,
+                template: path.resolve(__dirname, './demo.html')
+            })
         ],
 
         devtool: '#source-map',
diff --git a/demos/without-virtual-list/index.html b/demos/without-virtual-list/index.html
@@ -2,11 +2,10 @@
 <html lang="en-US">
 <head>
     <meta charset="utf-8">
-    <title>without use virtual-list</title>
+    <title>without-virtual-list demo of vue-virtual-scroll-list</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
 </head>
 <body>
-    <div id="app"></div>
-    <script src="build.js"></script>
-</body>
+<div id="app"></div>
+<script type="text/javascript" src="build.js"></script></body>
 </html>
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^5.2.2",
+    "html-webpack-plugin": "^3.2.0",
     "jest": "^24.7.0",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
