1.优化分包策略。 2.增加选择普通装备的功能

2019专题/云顶之弈模拟器/_build/genMultiEntry.js

@@ -17,7 +17,8 @@ const genHtmlWebpackPlugin = (files) => {
     return new HtmlWebpackPlugin({
       template: path.join(pagesPath, fileName),
       filename: fileName,
-      chunks: ['vendors', 'commons', chunkName]
+      chunks: [chunkName],
+      minify: false
     })
   })
 }

2019专题/云顶之弈模拟器/package.json

@@ -6,13 +6,15 @@
 		"@babel/polyfill",
 		"*.css",
 		"*.scss",
-    "*.vue",
-    "./src/assets/js/flexible.js"
+		"*.vue",
+		"./src/assets/js/flexible.js"
 	],
 	"scripts": {
 		"bundle": "webpack --config webpack.dev.js",
 		"dev": "webpack-dev-server --config webpack.dev.js",
-		"build": "webpack --config webpack.prod.js"
+    "build": "webpack --config webpack.prod.js",
+    "build:test": "webpack --config webpack.prod.js --env.test",
+		"analyse": "webpack --config webpack.prod.js --env.analyse --env.test"
 	},
 	"repository": {
 		"type": "git",
@@ -51,7 +53,7 @@
 		"eslint-plugin-vue": "^5.2.2",
 		"file-loader": "^3.0.1",
 		"html-loader": "^0.5.5",
-		"html-webpack-plugin": "^3.2.0",
+		"html-webpack-plugin": "^4.0.0-beta.8",
 		"mini-css-extract-plugin": "^0.5.0",
 		"node-sass": "^4.11.0",
 		"optimize-css-assets-webpack-plugin": "^5.0.1",
@@ -64,7 +66,8 @@
 		"vue-template-compiler": "^2.6.10",
 		"webpack": "^4.29.6",
 		"webpack-dev-server": "^3.2.1",
-		"webpack-merge": "^4.2.1"
+		"webpack-merge": "^4.2.1",
+		"webpack-bundle-analyzer": "^3.4.1"
 	},
 	"browserslist": [
 		"> 1%",

2019专题/云顶之弈模拟器/src/components/commentFrame.vue

@@ -5,7 +5,7 @@
       id="iframeCmt"
       frameborder="0"
       scrolling="yes"
-      :style="{width:'100%',height: flexible ? '532px' : 'auto'}"
+      :style="{width:'100%',height: flexible ? '532px' : ''}"
     ></iframe>
   </div>
 </template>

2019专题/云顶之弈模拟器/src/components/hero.vue

@@ -15,7 +15,7 @@
       :equipment="eq"
       @selectEquipment="handleHeroSelectEquipment"
       :equipmentIndex="index"
-      :flexible='true'
+      :flexible='flexible ? true : false'
     />
   </div>
 </template>

2019专题/云顶之弈模拟器/src/components/index.vue

@@ -11,6 +11,13 @@
         <div class="user-wrapper">
             <span @click="login" v-if="!isLogin">登录</span>  <span @click="register">注册</span> <p v-if="isLogin">| 昵称: {{nickname}} |</p>  <span @click="logout" v-if="isLogin">注销</span> <a href="http://lol.duowan.com/1908/m_429117644428.html" target="_blank" v-if="isLogin">我的分享</a>
         </div>
+
+        <div class="penguin-wrapper">
+          <penguin />
+        </div>
+
+
+
       <div class="board-container">
         <div class="board-left">
           <h6>英雄池</h6>
@@ -291,6 +298,7 @@ import hero from '../components/hero'
 import { findFromTail, genRandomInteger, uuid } from '../utils/helper'
 import shareItem from './shareItem'
 import {getTeamList, shareTeam, getSimulatorData, getUserInfo} from '../API/index'
+import penguin from '../components/penguin'
 
 const HERO_MAX_EUIPMENT = 3 // 英雄最大装备上限
 const INITIAL_MAX_POPULATION = 1 // 初始最大英雄上限
@@ -350,7 +358,8 @@ export default {
   },
   components: {
     hero,
-    shareItem
+    shareItem,
+    penguin
   },
   computed: {
     // 当前最大人口
@@ -759,8 +768,8 @@ export default {
       this.heroes = data.hero.data
       this.littleHeroes = data.littleHero.data
 
- 
 
+      console.log(data)
     })
 
   }
@@ -949,10 +958,10 @@ export default {
           z-index: 100;
           .equipment-selector {
             position: absolute;
-            width: 237px;
-            height: 126px;
-            left: calc(50% - 158px);
-            top: calc(50% - 63px);
+            width: 474px;
+            height: 346px;
+            left: calc(50% - 237px);
+            top: calc(50% - 173px);
             border: 1px solid #ffca57;
             background-color: black;
             box-sizing: border-box;

2019专题/云顶之弈模拟器/src/components/m-index.vue

@@ -181,7 +181,7 @@
                   :src="eq.img"
                   v-for="eq in simulatorEquipment"
                   :key="eq.id"
-                  class="hero"
+                  :class="['equipment', currentHero && currentHero.selectedEquipments.includes(eq) ? 'active' : '']"
                   @click.stop="handleHeroSelectEquipment(eq)"
                 />
               </div>
@@ -228,7 +228,7 @@ export default {
       currentJob: 'all', // 当前筛选的职业
       currentGroup: 'all', // 当前筛选的阵营
       currentGird: null, // 当前棋子空位索引
-      currentHero: null, // 当前点击的英雄
+      currentHero: null, // 当前点击的英雄,
       selectedHeroes: Array(MAX_HEROES_COUNT), // 阵容中的英雄
       simulatorEquipment: [], // 模拟器的装备
       equipmentSelectorVisiable: false, // 装备选择窗口显隐
@@ -317,10 +317,16 @@ export default {
       this.littleHeroSelectorVisiable = false
     },
     handleHeroSelectEquipment(_eq) {
-      const equipments = this.selectedHeroes[this.currentGird]
-        .selectedEquipments
+      const hero = this.selectedHeroes[this.currentGird]
+      if(!hero) {
+        return alert('请先选择英雄')
+      }
+      const equipments = hero.selectedEquipments
       const _index = equipments.findIndex(__e => !__e)
       equipments.splice(_index, 1, _eq)
+
+      // 这是为了让装备选择高亮
+      this.currentHero.selectedEquipments.splice(_index, 1, _eq)
     },
     reset() {
       this.selectedHeroes = Array(MAX_HEROES_COUNT)
@@ -605,7 +611,12 @@ export default {
         this.goals = goals
       },
       deep: true
-    }
+    },
+    equipmentSelectorVisiable(v){
+      if(!v) {
+        this.currentSelectType = 'hero'
+      }
+    },
   },
   mounted() {
     // 获取模拟器数据
@@ -827,7 +838,7 @@ $theme-color: #c49a2a;
         }
       }
       .goal {
-        margin-right: px2rem(20);
+        margin-right: px2rem(10);
       }
     }
   }
@@ -1055,13 +1066,13 @@ $theme-color: #c49a2a;
           border: 1px solid black;
           margin-bottom: px2rem(16);
           margin-right: px2rem(16);
+          &.active{
+            border-color: $theme-color;
+          }
           &:nth-child(4n) {
             margin-right: 0;
           }
         }
-        .hero.active{
-          border-color: $theme-color
-        }
       }
     }
   }

2019专题/云顶之弈模拟器/src/components/m-shareDetail.vue

@@ -197,13 +197,7 @@ export default {
       this.star_count = _data.star_count
       this.dislike_count = _data.dislike_count
       this.comment3Uniqid = _data.body.comment3Uniqid
-      getUserInfo(this.yyuid)
-        .then(res => {
-          this.author = res.data.nickname
-        })
-        .catch(() => {
-          this.author = _data.username
-        })
+      this.author = _data.nickname
     })
   }
 }

2019专题/云顶之弈模拟器/src/components/penguin.vue

@@ -0,0 +1,27 @@
+<template>
+  <img src="../assets/images/penguin.png" alt="" class="penguin">
+</template>
+
+<script>
+export default {
+  
+}
+</script>
+
+<style lang="scss" scoped>
+.penguin{
+  animation: penguin 3s ease infinite;
+}
+
+@keyframes penguin {
+  0%{
+    transform: translateY(0px);
+  }
+  50%{
+    transform: translateY(10px);
+  }
+  100%{
+    transform: translateY(0px);
+  }
+}
+</style>

2019专题/云顶之弈模拟器/src/components/shareDetail.vue

@@ -46,6 +46,9 @@
           </div>
         </div>
       </div>
+      <div class="penguin-wrapper">
+        <penguin/>
+      </div>
       <pre class="desc">{{desc}}</pre>
       <div class="btn-group">
         <div :class="['btn-item', is_star ? 'operated' : '']" @click="operateTeam('star')">
@@ -78,16 +81,18 @@
 </template>
 
 <script>
-import { getTeamDetail, operateTeam, getUserInfo} from '../API/index'
+import { getTeamDetail, operateTeam} from '../API/index'
 import hero from '../components/hero'
 import commentFrame from '../components/commentFrame'
+import penguin from '../components/penguin'
 
 const ID = window.location.search.match((/id=(\d+)&?/))[1]
 
 export default {
   components: {
     hero,
-    commentFrame
+    commentFrame,
+    penguin
   },
   data() {
     return {
@@ -143,11 +148,7 @@ export default {
       this.star_count = _data.star_count
       this.dislike_count = _data.dislike_count
       this.comment3Uniqid = _data.body.comment3Uniqid
-      getUserInfo(this.yyuid).then(res => {
-        this.author = res.data.nickname
-      }).catch(() => {
-        this.author = _data.username
-      })
+      this.author = _data.nickname
     })
   }
 }

2019专题/云顶之弈模拟器/src/components/shareList.vue

@@ -8,6 +8,9 @@
         <a href="http://lol.duowan.com/1906/m_425042631560.html" target="_blank">>>云顶之弈<<</a>
         <span @click="toMyShare">>>我的分享<<</span>
       </div>
+      <div class="penguin-wrapper">
+        <penguin />
+      </div>
       <div class="sub-title title1"></div>
       <ul class="share-list">
         <li v-for="team in powerfulTeamList" :key="team.id">
@@ -32,6 +35,7 @@
 
 <script>
 import shareItem from './shareItem'
+import penguin from '../components/penguin'
 import { getTeamList } from '../API/index'
 
 let currentPage = 1
@@ -46,7 +50,8 @@ export default {
     }
   },
   components: {
-    shareItem
+    shareItem,
+    penguin
   },
   mounted() {
     getTeamList('like_count|desc').then(res => {

2019专题/云顶之弈模拟器/src/scss/index.scss

@@ -1,2 +1,8 @@
 @import '../assets/iconfont/iconfont.css';
 @import './reset.css';
+
+.penguin-wrapper{
+  position: absolute;
+  right: 40px;
+  top: 50px;
+}

2019专题/云顶之弈模拟器/webpack.common.js

@@ -15,19 +15,7 @@ module.exports = {
   },
   optimization: {
     splitChunks: {
-      chunks: 'all',
-      cacheGroups: {
-        vendors: {
-          test: /[\\/]node_modules[\\/]/,
-          priority: -10,
-          name: 'vendors'
-        },
-        commons: {
-          name: 'commons',
-          chunks: 'initial',
-          minChunks: 2
-        }
-      }
+      chunks: 'all'
     }
   },
   module: {

2019专题/云顶之弈模拟器/webpack.prod.js

@@ -4,67 +4,72 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const TerserJSPlugin = require('terser-webpack-plugin')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const CleanWebpackPlugin = require('clean-webpack-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const webpack = require('webpack')
 const path = require('path')
-const prodConf = {
-  mode: 'production',
-  devtool: 'cheap-module-source-map',
-  output: {
-    path: path.resolve(__dirname, '../../../pub/zq2019/t_ydzy_simulator'),//path.resolve(__dirname, '../../../pub/zq2019/ydzy_simulator'),
-    publicPath: '//pub.dwstatic.com/zq2019/t_ydzy_simulator/',
-    filename: 'js/[name]_[contenthash:5].js',
-  },
-  module: {
-    rules: [
-      {
-        test: /(?<!\.module)\.(scss|css)$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader',
-            options: {
-              importLoaders: 2
-            }
-          },
-          'sass-loader',
-          'postcss-loader'
-        ]
-      },
-      {
-        test: /(?<=\.module)\.(scss|css)$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader',
-            options: {
-              importLoaders: 2,
-              modules: true
-            }
-          },
-          'sass-loader',
-          'postcss-loader'
-        ]
-      }
-    ]
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: 'css/[name]_[contenthash:5].css',
-      chunkFilename: 'css/[id]_[contenthash:5].css'
-    }),
-    new CleanWebpackPlugin(),
-    new webpack.DefinePlugin({
-      DEV: JSON.stringify(false)
-    })
-  ],
-  optimization: {
-    minimizer: [
-      new TerserJSPlugin({
-        sourceMap: true
+
+module.exports = env => {
+  const prodConf = {
+    mode: 'production',
+    devtool: 'cheap-module-source-map',
+    output: {
+      path: env && env.test ? path.resolve(__dirname, '../../../pub/zq2019/t_ydzy_simulator') : path.resolve(__dirname, '../../../pub/zq2019/ydzy_simulator'),
+      publicPath: env && env.test ? '//pub.dwstatic.com/zq2019/t_ydzy_simulator/' : '//pub.dwstatic.com/zq2019/ydzy_simulator/',
+      filename: 'js/[name]_[contenthash:5].js',
+    },
+    module: {
+      rules: [
+        {
+          test: /(?<!\.module)\.(scss|css)$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 2
+              }
+            },
+            'sass-loader',
+            'postcss-loader'
+          ]
+        },
+        {
+          test: /(?<=\.module)\.(scss|css)$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 2,
+                modules: true
+              }
+            },
+            'sass-loader',
+            'postcss-loader'
+          ]
+        }
+      ]
+    },
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: 'css/[name]_[contenthash:5].css',
+        chunkFilename: 'css/[id]_[contenthash:5].css'
       }),
-      new OptimizeCSSAssetsPlugin({})
-    ]
+      new CleanWebpackPlugin(),
+      new webpack.DefinePlugin({
+        DEV: JSON.stringify(false)
+      })
+    ].concat(env && env.analyse ? new BundleAnalyzerPlugin() : []),
+    optimization: {
+      minimizer: [
+        new TerserJSPlugin({
+          sourceMap: true
+        }),
+        new OptimizeCSSAssetsPlugin({})
+      ]
+    }
   }
+  return merge(commonConf, prodConf)
 }
 
-module.exports = merge(commonConf, prodConf)
+