mirror of
https://github.com/FormidableLabs/webpack-dashboard.git
synced 2026-01-25 14:27:01 +00:00
82 lines
2.4 KiB
Markdown
82 lines
2.4 KiB
Markdown
# Getting Started with Webpack-Dashboard
|
|
|
|
## Install
|
|
|
|
```sh
|
|
$ npm install --save-dev webpack-dashboard
|
|
# ... or ...
|
|
$ yarn add --dev webpack-dashboard
|
|
```
|
|
|
|
## Use
|
|
|
|
***OS X Terminal.app users:*** Make sure that **View → Allow Mouse Reporting** is enabled, otherwise scrolling through logs and modules won't work. If your version of Terminal.app doesn't have this feature, you may want to check out an alternative such as [iTerm2](https://www.iterm2.com/index.html).
|
|
|
|
First, import the plugin and add it to your webpack config:
|
|
|
|
```js
|
|
// Import the plugin:
|
|
const DashboardPlugin = require("webpack-dashboard/plugin");
|
|
|
|
// Add it to your webpack configuration plugins.
|
|
module.exports = {
|
|
// ...
|
|
plugins: [new DashboardPlugin({
|
|
/* options */
|
|
})];
|
|
// ...
|
|
};
|
|
```
|
|
|
|
Because sockets use a port, the constructor now supports passing an options object that can include a custom port (if the default is giving you problems). 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:
|
|
|
|
```js
|
|
plugins: [
|
|
new DashboardPlugin({ port: 3001 })
|
|
]
|
|
```
|
|
|
|
The next step, is to call webpack-dashboard from your `package.json`. So if your dev server start script previously looked like:
|
|
|
|
```js
|
|
"scripts": {
|
|
"dev": "node index.js"
|
|
}
|
|
```
|
|
|
|
You would change that to:
|
|
|
|
```js
|
|
"scripts": {
|
|
"dev": "webpack-dashboard -- node index.js"
|
|
}
|
|
```
|
|
|
|
If you are using the webpack-dev-server script, you can do something like:
|
|
|
|
```js
|
|
"scripts": {
|
|
"dev": "webpack-dashboard -- webpack-dev-server --config ./webpack.dev.js"
|
|
}
|
|
```
|
|
|
|
Again, the new version uses sockets, so if you want to use a custom port you must use the `-p` option to pass that:
|
|
|
|
```js
|
|
"scripts": {
|
|
"dev": "webpack-dashboard -p 3001 -- node index.js"
|
|
}
|
|
```
|
|
You can also pass a supported ANSI color using the `-c` flag to custom colorize your dashboard:
|
|
|
|
```js
|
|
"scripts": {
|
|
"dev": "webpack-dashboard -c magenta -- node index.js"
|
|
}
|
|
```
|
|
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.
|
|
|
|
## Other usage
|
|
|
|
We previously provided detailed guides for integration with `webpack-dev-server` and `express`, but as both of those projects now can be entirely configuration file based, we recommend just following the [webpack development server guide](https://webpack.js.org/guides/development/) to integrate with your appropriate development server setup of choice.
|