webpack-dashboard: Cannot integrate with webpack-dev-server

Please provide a description of the bug / issue, and provide the details below:

I have a problem with starting a dashboard with a webpack-dev-server. Webpack-dashboard starts webpack-dev-server in a separate process, but the server watches for file changes, so the process never ends. Because of this I see a permanent empty dashboard.

====================================================================

If the issue is visual, please provide screenshots here

====================================================================

Steps to reproduce the problem

npm run dashboard

====================================================================

Please provide a gist of relevant files

https://gist.github.com/Humberd/aae6370e8b38e11bf4d6be18c7ed9043

package.json (specifically the script you are using to start the dashboard)

{
  "name": "hd-navbar",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dashboard": "webpack-dashboard -- webpack-dev-server"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "awesome-typescript-loader": "^3.1.3",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "html-loader": "^0.4.5",
    "node-sass": "^4.5.2",
    "path": "^0.12.7",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.17.0",
    "typescript": "^2.3.2",
    "webpack": "^2.5.1",
    "webpack-dashboard": "^0.4.0",
    "webpack-dev-server": "^2.4.5"
  }
}

webpack.config.js

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const DashboardPlugin = require("webpack-dashboard/plugin");

module.exports = {
  entry: {
    "hd-navbar": "./src/index.ts"
  },
  watch: true,
  watchOptions: {
    aggregateTimeout: 300,
    ignored: /node_modules/
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    watchContentBase: true
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.ts?$/,
        loader: "awesome-typescript-loader",
        exclude: [/\/node_modules\//]
      }, {
        test: /\.html$/,
        loader: "html-loader"
      }, {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("hd-navbar.css"),
    new CleanWebpackPlugin("dist"),
    new DashboardPlugin(() => {})
  ],
  resolve: {
    extensions: [".ts", ".js"]
  }
};

====================================================================

More Details

What operating system are you on? - Windows 10 Home
What terminal application are you using? - cmd
What version of webpack-dashboard are you using? - 0.4.0
What is the output of running echo $TERM? - $TERM

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 25 (9 by maintainers)

Most upvoted comments

you should try this https://github.com/FormidableLabs/webpack-dashboard/blob/master/docs/getting-started.md#webpack-dev-server

this works for me: package.json:

...
  "scripts": {
    "preview": "webpack-dashboard -- webpack-dev-server --config ./webpack.config.js"
  }
...
 "devDependencies": {
...
    "webpack": "^2.6.1",
    "webpack-dashboard": "^0.4.0",
    "webpack-dev-server": "^2.4.5"
...
  }

webpack.config.js:

const Dashboard = require('webpack-dashboard');
const DashboardPlugin = require('webpack-dashboard/plugin');
const dashboard = new Dashboard();
const myPort = 9001;
...
const config = {
...
  plugins: [
    new DashboardPlugin({
      port: myPort,
      handler: dashboard.setData
    })
  ]
...
}
...
  config.devServer = {
    contentBase: path.join(__dirname, 'src'),
    compress: true,
    historyApiFallback: true,
    port: myPort,
    host: '127.0.0.1',
    inline: true,
    quiet: true,   // important
    hot: true,
    open: true,
  };

module.exports = config;

Image 5.png

+15

VitoKingg on Jun 18, 2017

I just tried with webpack-dashboard -- webpack-dev-server and it’s working for me?

{
  "scripts": {
    "start": "webpack-dashboard -- webpack-dev-server",
  },
  "devDependencies": {
    "webpack-dashboard": "^0.4.0"
  },
  "dependencies": {
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5",
  }
}

alicoding on Jun 8, 2017

I have webpack 4, webpack dev server, same issue, it does not work. Only fills the log window. The rest of the window are empty. Using for an angular 1 project

albanx on Jun 6, 2018

+1 not working

hugofqueiros on Sep 26, 2017

This happens when you specify the PORT. new DashboardPlugin({ port: 8080 })

Here is a repo where I can reproduce the error https://github.com/albanx/angularjs-webpack

If I remove the port everything works fine: new DashboardPlugin() I think the documentation here needs to be updated https://github.com/FormidableLabs/webpack-dashboard/blob/master/docs/getting-started.md

It is not clear what is the purpose of the port and if it is optional or not.

albanx on Jun 6, 2018

not work T_T

imsasa on Sep 14, 2017

@albanx – Please see this comment. If you can get us a repository with install + error reproduction steps, we’ll take a llok.

ryan-roemer on Jun 6, 2018