How to use webpack-dashboard - 10 common examples

webpackConfig.filter(x => x.target !== "node").forEach(config => {
      /* eslint-disable no-param-reassign */
      config.entry = ["webpack-hot-middleware/client"].concat(config.entry)
      config.output.filename = config.output.filename.replace("[chunkhash]", "[hash]")
      config.output.chunkFilename = config.output.chunkFilename.replace("[chunkhash]", "[hash]")
      config.plugins.push(new webpack.HotModuleReplacementPlugin())
      config.plugins.push(new webpack.NoEmitOnErrorsPlugin())
      config.plugins.push(new DashboardPlugin())
    })

// that for you, so you don't need to, if
// you need to change the container template
// go to the file in `template` below
const html = config.get('html');

const htmlPlugins = html.map((page) =>
  new HtmlWebpackPlugin({
    title: page.title,
    template: `src/assets/template/${page.template}`,
    inject: 'body',
    filename: page.filename,
  })
);

webpackConfig.plugins.push(
  new DashboardPlugin({ port: 3300 }),
  new webpack.LoaderOptionsPlugin({
    debug: true
  }),
  // Since we specify --hot mode, we don’t need to add this plugin
  // It is mutually exclusive with the --hot option.
  // new webpack.HotModuleReplacementPlugin(),
  new webpack.DefinePlugin({
    __CONFIG__: JSON.stringify(config.get('app')),
    'process.env': {
      NODE_ENV: JSON.stringify('development'),
    },
  })
);

webpackConfig.module.rules = webpackConfig.module.rules.concat({
  test: /\.css$/,

webpackConfig.filter(x => x.target !== "node").forEach(config => {
      /* eslint-disable no-param-reassign */
      config.entry = ["webpack-hot-middleware/client"].concat(config.entry)
      config.output.filename = config.output.filename.replace("[chunkhash]", "[hash]")
      config.output.chunkFilename = config.output.chunkFilename.replace("[chunkhash]", "[hash]")
      config.plugins.push(new webpack.HotModuleReplacementPlugin())
      config.plugins.push(new webpack.NoEmitOnErrorsPlugin())
      config.plugins.push(new DashboardPlugin())
    })

},
    plugins: [
      new webpack.LoaderOptionsPlugin({
        minimize: isProduction,
        debug: !isProduction
      }),
      ...(isProduction ? [
        ...(isMinified ? [
          new BabiliPlugin({
            mangle: true
          }, {
            sourceMap: true
          })
        ] : [])
      ] : [
        new DashboardPlugin()
      ]),
      new HappyPack({loaders: ['babel-loader'], threads: 4}),
      new webpack.BannerPlugin(bannerText),
      ...plugins
    ],
    resolve: {
      modules: [
        path.resolve(__dirname, 'node_modules'),
        src
      ]
    }
  };
}

const plugins = [
  new FaviconsWebpackPlugin({
    logo: './src/img/logo.png',
  }),
  new HtmlWebpackPlugin({
    title: 'Vet',
  }),
];
if (process.env.NODE_ENV !== 'production') {
  app.unshift(
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
  );
  plugins.push(
    new DashboardPlugin(),
    new HotModuleReplacementPlugin(),
    new NamedModulesPlugin(),
  );
}


export default {
  entry: {
    app,
  },
  output: {
    filename: 'js/[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [

import path from 'path';
import express from 'express';
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import config from './webpack.dev.js';
import DashboardPlugin from 'webpack-dashboard/plugin';

const port = process.env.PORT || 3735;
const host = process.env.HOST || "localhost";

const app = express();
const compiler = webpack(config);
compiler.apply(new DashboardPlugin());
const middleware = webpackMiddleware(compiler, {
  publicPath: config.output.publicPath,
  noInfo: true,
  stats: {
    colors: true
  }
});

app.use(middleware);

if (process.env.BABEL_ENV === 'hot-reload') {
  app.use(webpackHotMiddleware(compiler));
}

app.use(express.static(path.join(__dirname, 'dist')));
app.use(function(req,res,next){

const setupCompiler = ({ host, port, protocol, config }) => {
  compiler = webpack(config)
  const dashboard = new Dashboard()
  compiler.apply(new DashboardPlugin(dashboard.setData))
}

const config = {
    ... baseConfig,

    entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:8000/#/',
        ...baseConfig.entry
    ],

    devtool: '#inline-source-map',

    plugins: [
        ...baseConfig.plugins,
        new webpack.HotModuleReplacementPlugin(),
        new DashboardPlugin(dashboard.setData),
    ],

    devServer: {
        quiet: true,
        hot: true,
        port: '8000',
        inline: true,
        historyApiFallback: true,
    }
}

export default config;

const setupCompiler = (config, env) => {
  compiler = webpack(config)
  const dashboard = new Dashboard()
  compiler.apply(new DashboardPlugin(dashboard.setData))
}

new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
  ],
  postcss() {
    return [
      cssnext,
      short,
      utilities,
    ];
  },
};

if (process.env.NODE_ENV === 'development') {
  config.entry.splice(1, 0, 'webpack-hot-middleware/client');
  config.plugins.push(new webpack.HotModuleReplacementPlugin(), new Dash());
  config.devtool = 'inline-source-map';
  config.module.loaders.push({
    test: /\.css$/,
    loader: 'style-loader!' +
    'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!' +
    'postcss-loader?sourceMap=inline',
  });
} else {
  config.module.loaders.push({
    test: /\.css$/,
    loader: Extracter.extract('style-loader',
      'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!' +
      'postcss-loader?sourceMap=inline'),
  });
}