feat: add webapck config

Xutaotaotao · Xutaotaotao · commit 3a4ff48bb2be · 2021-03-21T22:57:38.000+08:00
diff --git a/build/webpack.config.js b/build/webpack.config.js
@@ -0,0 +1,58 @@
+const { VueLoaderPlugin } = require('vue-loader')
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+const NODE_ENV = process.env.NODE_ENV
+
+
+const HOST = 'localhost'
+const PORT = 8081
+
+module.exports = {
+	mode: NODE_ENV,
+  entry: {
+    main: process.env.NODE_ENV === 'development' ? path.resolve(__dirname, '../example/index.js') : path.resolve(__dirname, '../src/index.js'),
+	},
+	output: {
+    path: path.resolve(__dirname, '../package'),
+    filename: 'vue-luck-draw.js', //打包之后生成的文件名，可以随意写。
+    library: 'vue-luck-draw', // 指定类库名,主要用于直接引用的方式(比如使用script 标签)
+    libraryExport: "default", // 对外暴露default属性，就可以直接调用default里的属性
+    globalObject: 'this', // 定义全局变量,兼容node和浏览器运行，避免出现"window is not defined"的情况
+    libraryTarget: 'umd' // 定义打包方式Universal Module Definition,同时支持在CommonJS、AMD和全局变量使用
+	},
+	module: {
+    rules: [
+      { test: /\.vue$/,
+				use: 'vue-loader'
+			},
+			{
+				test:	/\.(png|svg|jpg|gif)$/,
+				use: [
+					'file-loader'
+				]
+			}
+    ],
+	},
+	devServer: {
+    clientLogLevel: 'warning',
+    hot: true,
+    contentBase: 'dist',
+    compress: true,
+    host: HOST,
+    port: PORT,
+    open: true,
+    overlay: { warnings: false, errors: true },
+		publicPath: '/',
+		contentBase: path.join(__dirname, 'dist'),
+    quiet: true
+  },
+	plugins: [
+		new VueLoaderPlugin(),
+		new HtmlWebpackPlugin({
+      template: './example/index.html',
+      filename: 'index.html',
+      inject: true
+    }),
+  ]
+}
diff --git a/example/img/button.png b/example/img/button.png
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
diff --git a/example/index.js b/example/index.js
@@ -0,0 +1,9 @@
+import Vue from 'vue';
+import App from './index.vue';
+import LuckDraw from '../src/index.js';
+
+Vue.use(LuckDraw)
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app');
diff --git a/example/index.vue b/example/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <LuckyWheel
+    ref="LuckyWheel"
+    width="300px"
+    height="300px"
+    :prizes="prizes"
+    :default-style="defaultStyle"
+    :blocks="blocks"
+    :buttons="buttons"
+    @start="startCallBack"
+    @end="endCallBack"
+  />
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      prizes: [],
+      defaultStyle: {
+        fontColor: '#d64737',
+        fontSize: '14px'
+      },
+      blocks: [
+        { padding: '13px', background: '#d64737' }
+      ],
+      buttons: [
+        { radius: '50px', background: '#d64737' },
+        { radius: '45px', background: '#fff' },
+        { radius: '41px', background: '#f6c66f', pointer: true },
+        {
+          radius: '35px', background: '#ffdea0',
+          imgs: [{ src: require('./img/button.png'), width: '65%', top: '-50%' }]
+        }
+      ],
+    }
+  },
+  mounted () {
+    this.getPrizesList()
+  },
+  methods: {
+    getPrizesList () {
+      const prizes = []
+      let data = ['1元红包', '100元红包', '0.5元红包', '2元红包', '10元红包', '50元红包', '0.3元红包', '5元红包']
+      data.forEach((item, index) => {
+        prizes.push({
+          title: item,
+          background: index % 2 ? '#f9e3bb' : '#f8d384',
+          fonts: [{ text: item, top: '10%' }],
+          imgs:[],
+        })
+      })
+      this.prizes = prizes
+    },
+    startCallBack () {
+      this.$refs.LuckyWheel.play()
+      setTimeout(() => {
+        this.$refs.LuckyWheel.stop(Math.random() * 8 >> 0)
+      }, 3000)
+    },
+    endCallBack (prize) {
+      alert(`恭喜你获得${prize.title}`)
+    },
+  }
+}
+</script>
diff --git a/index.js b/index.js
@@ -1 +1 @@
-module.exports = require('./dist/vue-luck-draw.common.js')
+module.exports = require('./package/vue-luck-draw.js')
diff --git a/package.json b/package.json
@@ -20,8 +20,26 @@
     "vue3",
     "index.js"
   ],
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack --config=build/webpack.config.js",
+    "start": "cross-env NODE_ENV=development webpack serve --config=build/webpack.config.js"
+  },
   "homepage": "https://100px.net",
   "dependencies": {
-    "lucky-canvas": "^1.5.3"
+    "clean-webpack-plugin": "^3.0.0",
+    "lucky-canvas": "^1.5.3",
+    "vue": "^2.6.12"
+  },
+  "devDependencies": {
+    "copy-webpack-plugin": "^8.0.0",
+    "cross-env": "^7.0.3",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "mini-css-extract-plugin": "^1.3.9",
+    "vue-loader": "^15.9.6",
+    "vue-template-compiler": "^2.6.12",
+    "webpack": "^5.27.1",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2"
   }
 }
diff --git a/package/index.html b/package/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><script defer="defer" src="vue-luck-draw.js"></script></head><body><div id="app"></div></body></html>
diff --git a/package/vue-luck-draw.js b/package/vue-luck-draw.js
diff --git a/package/vue-luck-draw.js.LICENSE.txt b/package/vue-luck-draw.js.LICENSE.txt
@@ -0,0 +1,14 @@
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
diff --git a/src/LuckDraw.vue b/src/LuckDraw.vue
@@ -16,6 +16,6 @@
 
 <script>
 export default {
-
+  name:'LuckDraw'
 }
 </script>
diff --git a/src/LuckyGrid.vue b/src/LuckyGrid.vue
@@ -3,9 +3,14 @@
 </template>
 
 <script>
-import { name, version } from '../package.json'
 import { LuckyGrid } from 'lucky-canvas'
+import pkg from '../package.json'
+
+const name = pkg.name
+const version = pkg.version
+
 export default {
+  name:'LuckyGrid',
   props: {
     width: { type: [String, Number], default: '' },
     height: { type: [String, Number], default: '' },
diff --git a/src/LuckyWheel.vue b/src/LuckyWheel.vue
@@ -3,9 +3,13 @@
 </template>
 
 <script>
-import { name, version } from '../package.json'
 import { LuckyWheel } from 'lucky-canvas'
+import pkg from '../package.json'
+
+const name = pkg.name
+const version = pkg.version
 export default {
+  name:'LuckyWheel',
   props: {
     width: { type: [String, Number], default: '' },
     height: { type: [String, Number], default: '' },
diff --git a/vue-luck-draw-3.4.5.tgz b/vue-luck-draw-3.4.5.tgz

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-module.exports = require('./dist/vue-luck-draw.common.js')`
	`1`	`+module.exports = require('./package/vue-luck-draw.js')`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><script defer="defer" src="vue-luck-draw.js"></script></head><body><div id="app"></div></body></html>`