webpack配置方式及如何优化

目的

使用良心云提供面板管理k8s，搭建于1C2G的CVM上，跑gogs，Mysql

现象

项目更新后，部分用户出现打开白屏。设备为Android版本的微信，猜测为非Google Play版本。IOS不受影响

主要对以前的svg模块、条件编译、打包版本号进行兼容

问题

单页应用在部署到服务器后由于manifest文件的更新，路由Hash值发生变化，导致路由点击报错从而无法跳转。

解决

既然每次部署一定会打包，那么在打包时由webpack创建版本号文件，在系统登录时获取，再比对当前版本看是否需要更新。
打包后会在打包目录下生成配置JSON，之后发请求即可。

缓存数据

两种方案，一种使用react思想，将搜索条件放入VUEX内，进入页面后重新调取，第二种使用keep-alive，本文采用keep-alive方案。

Array

遍历数组

[1, 2, 3].forEach((val, index) => console.log(val))

映射新数组

let arr = [1, 2, 3].map(v=>v*2)

所有元素是否通过测试

[1, 2, 3, 4].every(v=>v>3)

是否有元素通过测试

[1, 2, 3, 4].some(v=>v>3)

函数

this&call……

1
2
3
4
5
6

function a() {
  console.log(this)
  console.log(arguments)
}
a.call() // 隐式传入this, arguments
a() // 隐式传入arguments,实际为window.a()