@types/webpack-dev-middleware

Basic Setup

This code sets up a basic Express server that uses webpack-dev-middleware to serve the webpack bundle. The middleware is configured with the webpack compiler and the public path from the webpack configuration.

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const compiler = webpack(config);

const app = express();

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

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

Custom Configuration

This code demonstrates how to customize the webpack-dev-middleware with additional options such as enabling colored stats output and writing files to disk.

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const compiler = webpack(config);

const app = express();

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

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

Using with Hot Module Replacement (HMR)

This code shows how to integrate webpack-dev-middleware with webpack-hot-middleware to enable Hot Module Replacement (HMR) in an Express application.

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config.js');
const compiler = webpack(config);

const app = express();

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

app.use(webpackHotMiddleware(compiler));

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});