feat: 添加开发预览调试页面

AnaniZhu · Feb 15, 2020 · 2050b0e · 2050b0e
1 parent 60d8c1f
commit 2050b0e
Show file tree

Hide file tree

Showing 6 changed files with 1,109 additions and 34 deletions.
diff --git a/examples/app.js b/examples/app.js
@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import ImagePreview from 'vue-img-viewer'
+import Example from './pages/example.vue'
+
+Vue.use(ImagePreview)
+
+// if (module.hot) {
+//   module.hot.accept()
+// }
+
+new Vue({
+  render: h => h(Example)
+}).$mount('#app')
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+<head>
+  <title>Vue-img-viewer Example</title>
+</head>
+<body style="padding: 0 20px">
+  <div id="app"></div>
+</body>
+</html>
diff --git a/src/example.vue → examples/pages/Example.vue b/src/example.vue → examples/pages/Example.vue
@@ -57,11 +57,8 @@
   </div>
 </template>
 <script>
-import ImagePreview from './ImagePreview'
+
 export default {
-  components: {
-    ImagePreview
-  },
   data () {
     return {
       visible: false,

diff --git a/examples/webpack.config.js b/examples/webpack.config.js
@@ -0,0 +1,69 @@
+const path = require('path')
+const webpack = require('webpack')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  mode: 'development',
+
+  entry: {
+    app: path.join(__dirname, './app.js')
+  },
+
+  output: {
+    path: path.join(__dirname, '__build__'),
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js'
+  },
+
+  resolve: {
+    alias: {
+      'vue-img-viewer': path.join(__dirname, '..', 'src')
+    }
+  },
+
+  devServer: {
+    contentBase: path.join(__dirname, '__build__'),
+    port: 9000,
+    hot: true,
+    clientLogLevel: 'none'
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        use: 'vue-loader'
+      },
+      {
+        test: /\.(css|scss)$/,
+        use: ['vue-style-loader', 'css-loader', 'sass-loader']
+      }
+    ]
+  },
+
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        shared: {
+          name: 'shared',
+          chunks: 'initial',
+          minChunks: 2
+        }
+      }
+    }
+  },
+
+  plugins: [
+    new VueLoaderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: 'examples/index.html'
+    })
+  ]
+}
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "private": false,
   "main": "dist/index.js",
   "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config examples/webpack.config.js",
     "build": "NODE_ENV=production webpack --config webpack.config.js"
   },
   "repository": {
@@ -42,6 +43,7 @@
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^5.2.3",
     "file-loader": "^4.0.0",
+    "html-webpack-plugin": "^3.2.0",
     "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "sass": "^1.22.3",
@@ -53,6 +55,7 @@
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^4.35.2",
-    "webpack-cli": "^3.3.5"
+    "webpack-cli": "^3.3.5",
+    "webpack-dev-server": "^3.8.0"
   }
 }