DefinitelyTyped/types/webpack-dev-server/webpack-dev-server-tests.ts

import webpack = require('webpack');
import WebpackDevServer = require('webpack-dev-server');
import { Application } from 'express';
const compiler = webpack({});
const multipleCompiler = webpack([]);

// basic example
let server = new WebpackDevServer(compiler, {
    publicPath: "/assets/"
});
server.listen(8080);

// Configuration can be used as a type
const config: WebpackDevServer.Configuration = {
    // webpack-dev-server options
    inline: true,
    // Toggle between the dev-server's two different modes --- inline (default, recommended for HMR) or iframe.

    contentBase: "/path/to/directory",
    // or: contentBase: "http://localhost/",

    public: 'public-host.ru',
    // Public host for server

    disableHostCheck: true,
    // Disable public host check, use it carefully

    hot: true,
    // Enable special support for Hot Module Replacement
    // Page is no longer updated, but a "webpackHotUpdate" message is send to the content
    // Use "webpack/hot/dev-server" as additional module in your entry point
    // Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does.

    // Set this as true if you want to access dev server from arbitrary url.
    // This is handy if you are using a html5 router.
    historyApiFallback: false,

    // Set this if you want to enable gzip compression for assets
    compress: true,

    // Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.
    // Use "**" to proxy all paths to the specified server.
    // This is useful if you want to get rid of 'http://localhost:8080/' in script[src],
    // and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 ).
    proxy: {
        "**": "http://localhost:9090"
    },

    setup: (app: Application, server: WebpackDevServer) => {
        // Here you can access the Express app object and add your own custom middleware to it.
        // For example, to define custom handlers for some paths:
        app.get('/some/path', (req, res) => {
            res.json({ custom: 'response' });
        });
    },

    // pass [static options](http://expressjs.com/en/4x/api.html#express.static) to inner express server
    staticOptions: {
    },

    stats: {
        assets: false,
        warningsFilter: /1/,
    },

    // webpack-dev-middleware options
    quiet: false,
    noInfo: false,
    lazy: true,
    filename: "bundle.js",
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    },
    writeToDisk: true,
    // It's a required option.
    publicPath: "/assets/",
    headers: { "X-Custom-Header": "yes" }
};

const c2: WebpackDevServer.Configuration = {
    stats: false,
};
const c3: WebpackDevServer.Configuration = {
    stats: "verbose",
};
const c4: WebpackDevServer.Configuration = {
    writeToDisk: (filePath: string) => true,
};
const c5: WebpackDevServer.Configuration = {
    proxy: [{context: (pathname: string) => true}]
};
const c6: WebpackDevServer.Configuration = {
    historyApiFallback: {
        disableDotRule: true,
        htmlAcceptHeaders: ['text/html'],
        index: '/app/',
        logger: () => {},
        rewrites: [
            {
                from: /\/page/,
                to: '/page.html'
            },
            {
                from: /^\/images\/.*$/,
                to: (context) => '/assets/' + context.parsedUrl.pathname
            }
        ],
        verbose: true
    }
};

// API example
server = new WebpackDevServer(compiler, config);
server.listen(8080, "localhost", () => { });

// HTTPS example
server = new WebpackDevServer(compiler, {
    publicPath: "/assets/",
    https: true
});

server.listen(8080, "localhost", () => { });

server.close();

const webpackConfig: webpack.Configuration = {
    context: __dirname,

    mode: 'development',

    target: 'node',

    devServer: config
};

WebpackDevServer.addDevServerEntrypoints(webpackConfig, {
    publicPath: "/assets/",
    https: true
});

WebpackDevServer.addDevServerEntrypoints(
    [webpackConfig],
    {
        publicPath: "/assets/",
        https: true
    },
    {
        address: () => ({ port: 80 })
    }
);

// multiple compilers
server = new WebpackDevServer(multipleCompiler, config);