Webpack-dashboard 简单使用

1. 安装

npm install webpack-dashboard --save-dev

2. 配置说明

webpack config

// Import the plugin:
var DashboardPlugin = require('webpack-dashboard/plugin');

// If you aren't using express, add it to your webpack configs plugins section:
plugins: [
    new DashboardPlugin()
]

// If you are using an express based dev server, add it with compiler.apply
compiler.apply(new DashboardPlugin());

// if using a custom port,

plugins: [
    new DashboardPlugin({ port: 3001 })
]
// 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:

"scripts": {
    "dev": "node index.js"
}
// change that to :

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

3. 简单使用（react 项目） 

// 目录结构

├── package.json
├── public
│   ├── index.html
│   └── style.css
├── server.js
├── src
│   └── index.js
└── webpack.config.js

// package.json

{
  "name": "webpack-dashboard-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "prebuild": "rm -rf dist && mkdir dist && cp public/* dist/",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {
    "webpack-dashboard": "0.0.1"
  }
}

//server.js

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config');

var Dashboard = require("webpack-dashboard");
var DashboardPlugin = require("webpack-dashboard/plugin");

var app = express();
var compiler = webpack(config);

var dashboard = new Dashboard();
compiler.apply(new DashboardPlugin(dashboard.setData));

app.use(express.static('public'));
app.use(require('webpack-dev-middleware')(compiler, {
  quiet: true
}));

app.listen(8080, "0.0.0.0", function(err) {
    if (err) {
        console.log(err);
        return;
    }

    console.log('Listening at http://0.0.0.0:8080');
});

// webpack.config.js

module.exports = {
  devtool: "inline-source-map",
  entry: __dirname + "/src/index.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist/"
  },
  devServer: {
    contentBase: "public/"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: __dirname + "/src/",
        loader: "babel-loader"
      }
    ]
  }
}

// index.js

import React from 'react';
import reactDOM from 'react-dom';

reactDOM.render(
  <div>
    <h1>A Webpack Dashboard dalong demo?!</h1>
    <p>Thanks, <a href="https://formidable.com/blog/2016/08/15/introducing-webpack-dashboard/">FormidableLabs</a>!</p>
    <p>(Check out the source <a href="https://github.com/FormidableLabs/webpack-dashboard">here</a>)</p>
  </div>,
  document.getElementById('root')
);

4. 启动效果

 

错误实时查看

修改为：

 

实时错误信息

 

 

5. 参考文档

https://github.com/FormidableLabs/webpack-dashboard