vconsole插件_vconsole-webpack-plugin

webpack plugin for vConsole

vconsole-webpack-plugin

webpack plugin for vConsole

帮助开发者在移动端进行调试,本插件是在 vConsole 的基础上封装的 webpack 插件,通过 webpack 配置即可自动添加 vConsole 调试功能,方便实用。

安装

npm install vconsole-webpack-plugin --save-dev

使用

webpack.conf.js 文件配置里增加以下插件配置即可

// 引入插件

var vConsolePlugin = require('vconsole-webpack-plugin');

module.exports = {

...

plugins: [

new vConsolePlugin({

filter: [], // 需要过滤的入口文件

enable: true // 发布代码前记得改回 false

}),

...

]

...

}

vConsole 作为一个调试模块,注定了需要在发布前把它去掉,为了避免人为操作失误而影响线上功能,这里建议配置如下:

package.json 文件配置:

scripts: {

"dev": "webpack -w --debug",

"prod": "webpack -p"

}

webpack.conf.js 配置:

// 引入插件

var vConsolePlugin = require('vconsole-webpack-plugin');

// 接收运行参数

const argv = require('yargs')

.describe('debug', 'debug 环境') // use 'webpack --debug'

.argv;

module.exports = {

...

plugins: [

new vConsolePlugin({enable: !!argv.debug}),

...

]

...

}

这样,在开发的时候运行 npm run dev,发布的时候运行 npm run prod 即可。

webpack-dev-server 的配套用法:

用法其实跟上面一样,只是别忘记在启动脚本的时候增加 --debug 即可。如下:

// package.json

"scripts": {

...

"start:dev": "webpack-dev-server --debug",

...

},

直接使用 vconsole

当然,有时候一些页面想临时添加 vconsole 来调试一下,可以直接使用:

window.vConsole = new window.VConsole();

HomePage

Repository

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值