vconsole使用配置

前言

移动端调试工具，帮助开发者在移动端进行调试

使用方法：

引入 wechatfe.github.io/vconsole/li…

<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
  <script>
  // init vConsole
     var vConsole = new VConsole();
     console.log('Hello world');
</script>

vconsole-webpack-plugin插件

介绍：

vconsole-webpack-plugin是在 vConsole 的基础上封装的 webpack 插件，通过 webpack 配置即可自动添加 vConsole 调试功能

安装：

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

配置：

作为调试模块，在发布代码前需将其注释掉，为避免人工失误，建议配置如下：

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({
      filter: [], // 需要过滤的入口文件
      enable: !!argv.debug  //是否启用
    }),
  ]
}

webpack-dev-server 的配套用法：

用法跟上面一样，只是别忘记在启动脚本的时候增加 --debug 即可

// package.json

"scripts": {
  "start:dev": "webpack-dev-server --debug",
}

当然，有时候一些页面想临时添加 vconsole 来调试一下，可以直接使用：
window.vConsole = new window.VConsole();