You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+19-16Lines changed: 19 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,26 +18,25 @@ That's cool, but it's mostly noise and scrolly and not super helpful. This plugi
18
18
19
19
### Use
20
20
21
+
**`webpack-dashboard@^2.1.1` requires Node 8 or above.** Previous versions support down to Node 6.
22
+
21
23
First, import the plugin and add it to your webpack config, or apply it to your compiler:
22
24
23
25
```js
24
26
// Import the plugin:
25
-
var DashboardPlugin =require('webpack-dashboard/plugin');
27
+
var DashboardPlugin =require("webpack-dashboard/plugin");
26
28
27
29
// If you aren't using express, add it to your webpack configs plugins section:
28
-
plugins: [
29
-
newDashboardPlugin()
30
-
]
30
+
plugins: [newDashboardPlugin()];
31
31
32
32
// If you are using an express based dev server, add it with compiler.apply
33
33
compiler.apply(newDashboardPlugin());
34
34
```
35
+
35
36
If using a custom port, the port number must be included in the options object here, as well as passed using the -p flag in the call to webpack-dashboard. See how below:
36
37
37
38
```js
38
-
plugins: [
39
-
newDashboardPlugin({ port:3001 })
40
-
]
39
+
plugins: [newDashboardPlugin({ port:3001 })];
41
40
```
42
41
43
42
In the latest version, you can either run your app, and run `webpack-dashboard` independently (by installing with `npm install webpack-dashboard -g`) or run webpack-dashboard from your `package.json`. So if your dev server start script previously looked like:
@@ -55,6 +54,7 @@ You would change that to:
55
54
"dev":"webpack-dashboard -- node index.js"
56
55
}
57
56
```
57
+
58
58
Now you can just run your start script like normal, except now, you are awesome. Not that you weren't before. I'm just saying. More so.
59
59
60
60
### Run it
@@ -64,8 +64,9 @@ Finally, start your server using whatever command you have set up. Either you ha
64
64
Then, sit back and pretend you're an astronaut.
65
65
66
66
### Supported Operating Systems and Terminals
67
+
67
68
**macOS →**
68
-
Webpack Dashboard works in Terminal, iTerm 2, and Hyper. For mouse events, like scrolling, in Terminal you will need to ensure *View → Enable Mouse Reporting* is enabled. This is supported in macOS El Capitan, Sierra, and High Sierra. In iTerm 2, to select full rows of text hold the <kbd>⌥ Opt</kbd> key. To select a block of text hold the <kbd>⌥ Opt</kbd> + <kbd>⌘ Cmd</kbd> key combination.
69
+
Webpack Dashboard works in Terminal, iTerm 2, and Hyper. For mouse events, like scrolling, in Terminal you will need to ensure _View → Enable Mouse Reporting_ is enabled. This is supported in macOS El Capitan, Sierra, and High Sierra. In iTerm 2, to select full rows of text hold the <kbd>⌥ Opt</kbd> key. To select a block of text hold the <kbd>⌥ Opt</kbd> + <kbd>⌘ Cmd</kbd> key combination.
69
70
70
71
**Windows 10 →** Webpack Dashboard works in Command Prompt, PowerShell, and Linux Subsystem for Windows. Mouse events are not supported at this time, as discussed further in the documentation of the underlying terminal library we use [Blessed](https://github.com/chjj/blessed#windows-compatibility). The main log can be scrolled using the <kbd>↑</kbd>, <kbd>↓</kbd>, <kbd>Page Up</kbd>, and <kbd>Page Down</kbd> keys.
71
72
@@ -74,25 +75,27 @@ Webpack Dashboard works in Terminal, iTerm 2, and Hyper. For mouse events, like
74
75
### API
75
76
76
77
#### webpack-dashboard (CLI)
78
+
77
79
##### Options
78
80
79
-
-`-c, --color [color]` - Custom ANSI color for your dashboard
80
-
-`-m, --minimal` - Runs the dashboard in minimal mode
81
-
-`-t, --title [title]` - Set title of terminal window
82
-
-`-p, --port [port]` - Custom port for socket communication server
81
+
-`-c, --color [color]` - Custom ANSI color for your dashboard
82
+
-`-m, --minimal` - Runs the dashboard in minimal mode
83
+
-`-t, --title [title]` - Set title of terminal window
84
+
-`-p, --port [port]` - Custom port for socket communication server
83
85
84
86
##### Arguments
85
87
86
88
`[command]` - The command you want to run, i.e. `webpack-dashboard -- node index.js`
87
89
88
90
#### Webpack plugin
91
+
89
92
#### Options
90
93
91
-
-`host` - Custom host for connection the socket client
92
-
-`port` - Custom port for connecting the socket client
93
-
-`handler` - Plugin handler method, i.e. `dashboard.setData`
94
+
-`host` - Custom host for connection the socket client
95
+
-`port` - Custom port for connecting the socket client
96
+
-`handler` - Plugin handler method, i.e. `dashboard.setData`
94
97
95
-
*Note: you can also just pass a function in as an argument, which then becomes the handler, i.e. `new DashboardPlugin(dashboard.setData)`*
98
+
_Note: you can also just pass a function in as an argument, which then becomes the handler, i.e. `new DashboardPlugin(dashboard.setData)`_
0 commit comments