diamont1001 / Vconsole Webpack Plugin
webpack plugin for vConsole
Stars: ✭ 129
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vconsole Webpack Plugin
Webpack Format Messages
Beautiful formatting for Webpack messages; ported from Create React App!
Stars: ✭ 103 (-20.16%)
Mutual labels: webpack, console
Webpack Messages
Beautifully format Webpack messages throughout your bundle lifecycle(s)!
Stars: ✭ 238 (+84.5%)
Mutual labels: webpack, console
Bad Ass Salesforce Stack
B.A.S.S. Starter: react / redux / typescript / antd / ts-force / sfdx / webpack / salesforce
Stars: ✭ 126 (-2.33%)
Mutual labels: webpack
Create Elm App
🍃 Create Elm apps with zero configuration
Stars: ✭ 1,650 (+1179.07%)
Mutual labels: webpack
Webapp Webpack Plugin
[DEPRECATED] use favicons-webpack-plugin instead
Stars: ✭ 127 (-1.55%)
Mutual labels: webpack
Mhy
🧩 A zero-config, out-of-the-box, multi-purpose toolbox and development environment
Stars: ✭ 128 (-0.78%)
Mutual labels: webpack
Mix
☄️ PHP CLI mode development framework, supports Swoole, WorkerMan, FPM, CLI-Server / PHP 命令行模式开发框架,支持 Swoole、WorkerMan、FPM、CLI-Server
Stars: ✭ 1,753 (+1258.91%)
Mutual labels: console
Apollo Universal Starter Kit
Apollo Universal Starter Kit is an SEO-friendly, fully-configured, modular starter application that helps developers to streamline web, server, and mobile development with cutting-edge technologies and ultimate code reuse.
Stars: ✭ 1,645 (+1175.19%)
Mutual labels: webpack
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (-1.55%)
Mutual labels: webpack
Koa Vue Fullstack
A lightweight boilerplate for a universal webapp based on koa, mongodb, node, vue, and webpack
Stars: ✭ 126 (-2.33%)
Mutual labels: webpack
Webpack Plugin Hash Output
Plugin to replace webpack chunkhash with an md5 hash of the final file conent.
Stars: ✭ 128 (-0.78%)
Mutual labels: webpack
Awesome Wp Cli
A curated list of packages and resources for WP-CLI, the command-line interface for WordPress.
Stars: ✭ 129 (+0%)
Mutual labels: console
Rollbar Sourcemap Webpack Plugin
A Webpack plugin to upload sourcemaps to Rollbar
Stars: ✭ 127 (-1.55%)
Mutual labels: webpack
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",
...
},
webpack-demo
例子参考:直接使用 vconsole
当然,有时候一些页面想临时添加 vconsole
来调试一下,可以直接使用:
<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
<script>
window.vConsole = new window.VConsole();
</script>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].