structure-graph-webpack-plugin/README.md

A webpack plugin to generate project structure graph

# structure-graph-webpack-plugin

[![npm](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js&r=r&type=6e&v=0.0.5&x2=0)](https://github.com/z-ti/structure-graph-webpack-plugin)

A webpack plugin to generate project structure graph

## Table of Contents

1.  [Installation](#installation)
2.  [Usage](#usage)
3.  [Issues](#issues)
4.  [License](#license)

### Installation

<a name="installation"></a>

```bash
  npm i --save-dev structure-graph-webpack-plugin
```

```bash
  yarn add --dev structure-graph-webpack-plugin
```

### Usage

<a name="usage"></a>

Here's an example webpack config illustrating how to use this plugin

**webpack.config.js**
```js
const StructureGraphPlugin = require("structure-graph-webpack-plugin");
{
  ...
  plugins: [
    new StructureGraphPlugin()
  ]
}
```
<h2 align="center">Options</h2>

You can pass a hash of configuration options to `structure-graph-webpack-plugin`.
Allowed values are as follows:

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**`targetName`**|`{String}`|`structure.txt`|The target file name of the generated directory structure map|
|**`ignoreDirectorys`**|`{Array.<string>}`|``|List of directories ignored in the process of generating files|
|**`ignoreFiles`**|`{Array.<string>}`|``|List of files ignored in the process of generating files|
|**`dress`**|`{String}`|`dashed`|The generated directory structure style, there are two values, dashed and solid|

Here's an example webpack config illustrating how to use these options

**webpack.config.js**
```js
const StructureGraphPlugin = require("structure-graph-webpack-plugin");
{
  ...
  plugins: [
    new StructureGraphPlugin({
      targetName: 'structure.md',
      ignoreDirectorys: ['.git', 'node_modules'],
      ignoreFiles: ['.DS_Store', 'structure.md']
    })
  ]
}
```

The generated project structure graph:

```
+-- dream-wall
¦    +-- .gitignore
¦    +-- README.md
¦    +-- build
¦        +-- webpack.base.conf.js
¦        +-- webpack.dev.conf.js
¦        +-- webpack.prod.conf.js
¦    +-- favicon.ico
¦    +-- index.html
¦    +-- package-lock.json
¦    +-- package.json
¦    +-- src
¦        +-- App.vue
¦        +-- components
¦            +-- footer.vue
¦            +-- header.vue
¦            +-- loading.vue
¦        +-- http
¦            +-- index.js
¦        +-- main.js
¦        +-- pages
¦            +-- download.vue
¦            +-- dream.vue
¦            +-- signin.vue
¦            +-- signup.vue
¦        +-- router
¦            +-- index.js
¦    +-- yarn.lock
```
### Issues

<a name="issues"></a>

If you encounter some problems during use, please click here [Issue Report](https://github.com/z-ti/structure-graph-webpack-plugin/issues)

### License

<a name="license"></a>

[MIT](https://github.com/z-ti/structure-graph-webpack-plugin/blob/main/LICENSE)

Copyright (c) 2022-present flyfox