Getting Started with Webpack-Dashboard

Install

$ 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.

First, import the plugin and add it to your webpack config:

// 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:

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:

"scripts": {
  "dev": "node index.js"
}

You would change that to:

"scripts": {
  "dev": "webpack-dashboard -- node index.js"
}

If you are using the webpack-dev-server script, you can do something like:

"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:

"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:

"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 to integrate with your appropriate development server setup of choice.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!