How to use webpack-dev-middleware - 10 common examples

// Handlebars setup
app.engine(config.views.engine, exphbs({
  extname: config.views.extension,
  helpers: hbsHelper
}));

// View Engine Setup
app.set('views', path.join(__dirname, config.views.path));
app.set('view engine', '.hbs');

// Webpack Compiler
const webpackCompiler = webpack(webpackConfig);

if (isDevelopment) {
  app.use(webpackDevMiddleware(webpackCompiler));
  app.use(webpackHotMiddleware(webpackCompiler));
}

// Device detector
app.use((req, res, next) => {
  res.locals.isMobile = isMobile(req.headers['user-agent']);

  return next();
});

// API dispatch
app.use('/api/blog', blogApi);
app.use('/api/library', libraryApi);

// Sending all the traffic to React
app.get('*', (req, res) => {

export default (app, options) => {

  const compiler = webpack(options);

  // Add the webpack dashboard plugin for some fancyness.
  compiler.apply(new DashboardPlugin());

  const middleware = devMiddleware(
    compiler,
    {
      publicPath : options.output.publicPath,
      noInfo     : true,
      lazy       : false,
      hot        : true,
      silent     : true,
    }
  );

  app.use(middleware);
  app.use(hotMiddleware(compiler));

  // Since the dev middleware uses memory-fs internally to store build
  // artifacts, we use it instead.
  const fs = middleware.fileSystem;

expressApp.use((req, res) => {

    const fileName = getFilenameFromUrl(httpStaticPath, fsClientOutputPath, req.url);

    // pre-renderer root route rather than giving index.html.
    if (!fileName || fileName === fsClientOutputPath) {
      return renderRoute(req, res, preRenderReactApp);
    }

    isReadable(fileName, readable => {
      if (readable) {
        return serveStaticFile(res, fileName);
      }

      return renderRoute(req, res, preRenderReactApp);
    });
  });
}

return `
    
      
        <title>Redux React Router – Server rendering Example</title>
      
      
        <div id="${MOUNT_ID}">${markup}</div>
        
        
      
    
  `;
};

app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(webpackHotMiddleware(compiler));

app.use((req, res) =&gt; {
  const store = reduxReactRouter({ routes, createHistory: createMemoryHistory })(createStore)(reducer);
  const query = qs.stringify(req.query);
  const url = req.path + (query.length ? '?' + query : '');

  store.dispatch(match(url, (error, redirectLocation, routerState) =&gt; {
    if (error) {
      console.error('Router error:', error);
      res.status(500).send(error.message);
    } else if (redirectLocation) {

const data = store.getState();
        const html = renderToString(
          
            
          
        );

        resolve({ data, html });
      })
      .catch(reject);
  });
});

if (isDeveloping) {
  const compiler = webpack(config);
  const middleware = webpackMiddleware(compiler, {
    publicPath: config.output.publicPath,
    contentBase: 'src',
    stats: {
      colors: true,
      hash: false,
      timings: true,
      chunks: false,
      chunkModules: false,
      modules: false,
    },
  });
  server.use(middleware);
  server.use(webpackHotMiddleware(compiler, {
    log: console.log,
  }));
} else {

await asyncOra('Launch Dev Servers', async () => {
      const tab = logger.createTab('Renderers');

      const config = await this.getRendererConfig(this.config.renderer.entryPoints);
      const compiler = webpack(config);
      const server = webpackDevMiddleware(compiler, {
        logger: {
          debug: tab.log.bind(tab),
          log: tab.log.bind(tab),
          info: tab.log.bind(tab),
          error: tab.log.bind(tab),
          warn: tab.log.bind(tab),
        },
        publicPath: '/',
        hot: true,
        historyApiFallback: true,
        writeToDisk: true,
      } as any);
      const app = express();
      app.use(server);
      app.use(webpackHotMiddleware(compiler));
      this.servers.push(app.listen(this.port));

entry: './src/client',

  output: {
    path: '/',
    publicPath: '/static',
    filename: 'bundle.js',
  },

  module: {
    rules: [{ test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }],
  },
};

app.use(
  webpackMiddleware(webpack(webpackConfig), {
    publicPath: webpackConfig.output.publicPath,
    stats: { colors: true },
  }),
);

app.use(async (req, res) => {
  const { redirect, status, element } = await getFarceResult({
    url: req.url,
    routeConfig,
    render,
  });

  if (redirect) {
    res.redirect(302, redirect.url);
    return;
  }

],
  },

  plugins: [
    new CopyWebpackPlugin([
      'src/assets',
      'node_modules/todomvc-common/base.css',
      'node_modules/todomvc-app-css/index.css',
    ]),
  ],

  devtool: 'cheap-module-source-map',
};

app.use(
  webpackMiddleware(webpack(webpackConfig), {
    stats: { colors: true },
  }),
);

app.use(async (req, res) => {
  const relaySsr = new RelayServerSSR();

  const { redirect, status, element } = await getFarceResult({
    url: req.url,
    historyMiddlewares,
    routeConfig,
    resolver: new Resolver(
      createRelayEnvironment(relaySsr, `http://localhost:${PORT}/graphql`),
    ),
    render,
  });

import webpack    from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../../../webpack.config.js';

const compiler = webpack(webpackConfig);
export const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath,
  stats: {
    colors: true,
    hash: false,
    timings: true,
    chunks: false,
    chunkModules: false,
    modules: false
  }
});
export const webpackHotMiddlewareInstance = webpackHotMiddleware(compiler);