使用 happypack 和 terser-webpack-plugin 优化 Webpack 项目构建速度 HappyPackHappyPack的工作原理:在Webpack和Loader之间多加了一层,改成了Webpack并不是直接去和某个Loader进行工作,而是Webpack test到了需要编译的某个类型的资源模块后,将该资源的处理任务交给了HappyPack,由HappyPack在内部线程池中进行任务调度,分配一个线程调用处理该类型资源的Loader来处理这个资源,完成后上报处理结果,最后HappyPack把处理结果返回给Webpack,最后由Webpack输出到目的路径。通过这一系列操作,将原本都在一
webpack打包定义版本号、引入cdn 1、引入html-webpack-pluginnpm i html-webpack-plugin -D2、在webpack.prod.conf.js的plugin中新增配置const date = new Date();const timestamp = date.getTime(); // 时间戳new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true,
HTML代码中<%%>、<%=%>、<%:%> <%%>之间可以写代码语句,例如:<% if (process.env.NODE_ENV === 'production') { %><script> var text = `PROD:${ GLOBAL.HOSPITAL_NAME } Company:${ moment().format("YYYY") } 公司 Host:${ GLOBAL.BASE_HOST } Date:${ moment().format("YYYY-MM-DD H
如何在引用javascript、css文件时添加时间戳,解决浏览器缓存问题 浏览器会缓存之前的javascript,css的版本,更新了javascript,css文件后,浏览器不会更新。所以在引入相关javascript、css文件时添加一个时间戳,能够让浏览器加载我们的最新版本。<link rel="stylesheet" href="/css/element.css?_t=<%=new Date().indexOf()%>"><script type="text/javascript" href="/js/element.js?_t=&.
JavaScript中的小技巧 空值合并操作符只有当左侧为null和undefined时,才会返回右侧的数.空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。// const foo = null ?? '123';console.log(foo); // 123// const baz = 0 ?? 42;console.log(baz); // 0// var a = obj ?? {};// 相当于var a;if(obj =
Git配置多个远程仓库 方法一: 使用 git remote add 命令1.1# 如下命令查看远程仓库的情况,可以看到只有一个叫 github 的远程仓库。git remotegithubgit remote -vgithub https://github.com/zxbetter/test.git (fetch)github https://github.com/zxbetter/test.git (push)1.2# 使用如下命令再添加一个远程仓库(这里以码云为例)git remote add osc
Vue中使用provide和inject 成对出现:provide和inject是成对出现的。作用:用于父组件向子孙组件传递数据。使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据。类型:provide:Object | () => Objectinject:Array<string>
处理图片的利器sips 使用终端命令行批量转换图片文件格式,使用的命令是sips,sips可以转换一个或多个图片文件的文件格式。下面这条命令就是sips命令的基本构成。使用下面命令时,需要将终端定位到图片文件所在文件夹。sips单个图片格式转换(jpg转png)#sips -s format [格式名称] [文件名] --out [输出文件的名称]sips -s format png image.jpg --out image.png;多个图片格式转换#for i in [文件名];#do #sips -s
vue-cli中全局引用scss 如果直接在main.js中引入会出现以下错误:解决办法:第一步:cnpm install sass-resources-loader --save-dev第二步:修改build中的utils.js修改为:scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { ...
解决vue-router出现message: "Navigating to current location ("/admin/index") is not allowed"的问题 其原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数,错误信息就会交给全局的路由错误处理,因此就会报上述的错误。vue-router先报了一个Uncaught (in promise)的错误(因为push没加回调),然后再点击路由的时候才会触发NavigationDuplicated的错误(路由出现的错误,全局错误处理打印了出...
解决 cnpm : 无法加载文件 cnpm.ps1 安装 cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org在使用 power shell 运行 cnpm 时报以下错误:cnpm : 无法加载文件 C:\Users\Administrator\AppData\Roamingpm\cnpm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https...
JavaScript处理移动端拍摄图片旋转问题 引入exif-js<script src="https://cdn.jsdelivr.net/npm/exif-js@2.3.0/exif.min.js"></script>/** * 处理图片文件(处理移动端拍摄图片旋转问题) * fileObj.file 图片文件独享 * fileObj.resolution 在指定图片格式为 image/jpeg 或 im...
DataURL、Blob、File、Image DataURL、Blob、File、Image之间的关系与转换var utils = { /** * @description canvas 转 dataURL * @param { Object } canvas 对象 * @param { Object } format 文件格式(默认为 image/jpeg) * @param { Obje...
vue 计算属性如何传参 vue 计算属性如何传参html 代码// html 中v-for="(row, i) in calculateList(scope.row.navDish, item)" :key="i"js 代码// 计算属性computed: { calculateList() { return (params1, params2) => { return params1.f...
git 修改仓库地址 方法一:使用命令修改第一步:先删除你的远程仓库git remote rm origin第二步:再添加远程仓库git remote add origin 仓库地址注意:如果有其他分支修改后需要重新拉去一下远程分支git fetch方法二:直接修改你本地的.git文件进入.git文件夹,编辑.git文件中的config文件修改config文件中的url路径为你的新远程仓库地址路...
如何修改element-ui主题色 1、在项目目录下安装主题工具,执行:npm install element-theme --dev2、在项目目录下安装 chalk 主题: npm install element-theme-chalk -D3、初始化变量文件,通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss,当然你可以传参...
js 生成唯一标识符 UUID UUIDUUID 是 通用唯一识别码(Universally Unique Identifier)的缩写,是一种软件建构的标准,亦为开放软件基金会组织在分布式计算环境领域的一部分。其目的,是让分布式系统中的所有元素,都能有唯一的辨识信息,而不需要通过中央控制端来做辨识信息的指定。如此一来,每个人都可以创建不与其它人冲突的UUID。在这样的情况下,就不需考虑数据库创建时的名称重复问题。目前最广泛...
js 数据分组(单个分组依据或多个分组依据) 方法一:/** * @description 数据分组 * @author CaoZM20132014 * @date 2019-07-19 * @export * @param { array } array 需要进行分组的数据 * @param { string } key 进行分组时依据的键名 * @param { string } resKey 分组后数据的键名,默认为 l...
JavaScript 作用域与作用域链 作用域变量或函数可以发生作用的区域即是作用域。作用域的最大用途就是隔离变量或函数,并控制变量或函数的生命周期,超过该区域的变量或函数就不能被访问。全局作用域在整个程序生命周期内都是有效的,在任意的函数内部都能访问的变量或函数拥有全局作用域。以下几种情形拥有全局作用域:1、在最外层定义的变量和函数拥有全局作用域。例子:var out = "hello";function o...