# pagelog-webpack-plugin

**Repository Path**: webpack-plugins/pagelog-webpack-plugin

## Basic Information

- **Project Name**: pagelog-webpack-plugin
- **Description**: pageLog插件配件服务。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# pagelog-webpack-plugin

#### 介绍

* 该插件用于在webpack开发环境下预先启动json解析页面http代理服务和数据传输服务。只为pagelog插件提供数据打印服务。
* pagelog插件将可JSON序列化数据打印到指定JSON解析页面，方便阅览、代码收缩、下载、复制、修改等功能集成。
* 主要用于打印api接口返回的超大数据集合，用于便捷分析、识别和提取。
* 支持打印数据类型 object(非function), array, string, number, boolean，不支持打印函数类、dom类、window等实例对象。
* 如果pagelog-webpack-plugin插件服务没有启动，数据将默认使用console.log打印到控制台。在生产环境下插件使用console.log打印。

#### 软件架构
* 配和 [pagelog](https://www.npmjs.com/package/pagelog) 使用。

#### 插件安装

1.  npm install pagelog --save
2.  npm install pagelog-webpack-plugin --save-dev

#### API

* wsPort: string || number

    socket服务端口号， default: 11996

* htmlPort: string || number

    html打印服务端口号， default: 51996
    
* forceRun: boolean

    true: 开启后重新编译后强制重启服务。default: false

#### 使用说明

* 1、webpack插件配置，只需在development环境下启动插件。

    * 用于先启动json解析页面http代理服务和数据传输服务。
    * PageLog页面服务默认访问地址：[http://localhost:7374](http://localhost:7374)
    * 后台socket数据互动服务默认占用端口号：8081

> webpack.config.js  
```javascript
const PageLogWebpackPlugin = require('pagelog-webpack-plugin');

module.exports = {
    plugins: [
      new PageLogWebpackPlugin()
    ]
}

```

* 2、简单使用：在项目入口引入pagelog
> src/index.js
```javascript
// 简单引入
import 'pagelog';

// 简单引入--直接使用
let info = new String() || new Array() || new Boolean() || new Object() || new Number();// 支持数据类型 object(非function), array, string, number, boolean
console.plog(info);
```

* 3、可配置使用： 在项目入口引入pagelog
> src/index.js
```javascript
// 可配置引入
import pagelog from 'pagelog';

// 选择性使用
let info = new String() || new Array() || new Boolean() || new Object() || new Number();// 支持数据类型 object(非function), array, string, number, boolean
pagelog.log(info);
```

* 4、在typescript项目中的d.ts声明

> types/global.d.ts
```typescript
// 声明 plog方法类
declare interface Console {
  plog: any,
  [propsName: string]: any
}
// 如果使用可配置模式，需要添加如下声明
declare module 'pagelog';
```
  后期补充 @types/pagelog 插件自动声明类型。