From 7d2faae15dff3d446d41b367441846cb60fa12bf Mon Sep 17 00:00:00 2001 From: overthesanity Date: Tue, 3 Jul 2018 19:39:38 +0300 Subject: [PATCH] [@types/webpack-dev-server] Module augmentation and descriptions for type defs (#26895) * Make module augmentation and update type defs for webpack-dev-server * Make module augmentation and update type defs for webpack-dev-server * Make module augmentation and update type defs for webpack-dev-server * Make module augmentation and update type defs for webpack-dev-server --- types/webpack-dev-server/index.d.ts | 151 ++++++++++++++---- .../webpack-dev-server-tests.ts | 21 ++- types/webpack/index.d.ts | 2 - 3 files changed, 137 insertions(+), 37 deletions(-) diff --git a/types/webpack-dev-server/index.d.ts b/types/webpack-dev-server/index.d.ts index 4dc419bd3a..dab8ae5467 100644 --- a/types/webpack-dev-server/index.d.ts +++ b/types/webpack-dev-server/index.d.ts @@ -4,76 +4,169 @@ // Dave Parslow // Zheyang Song // Alan Agius +// Artur Androsovych // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 import * as webpack from 'webpack'; -import * as core from 'express-serve-static-core'; -import * as serveStatic from 'serve-static'; -import * as http from 'http'; -import * as spdy from 'spdy'; import * as httpProxyMiddleware from 'http-proxy-middleware'; +import * as express from 'express'; +import * as serveStatic from 'serve-static'; +import * as https from 'https'; +import * as http from 'http'; declare namespace WebpackDevServer { interface ListeningApp { address(): { port?: number }; } - interface proxyConfigMap { + interface ProxyConfigMap { [url: string]: string | httpProxyMiddleware.Config; } - type proxyConfigArrayItem = { + type ProxyConfigArrayItem = { path?: string | string[]; context?: string | string[] } & httpProxyMiddleware.Config; - type proxyConfigArray = proxyConfigArrayItem[]; + type ProxyConfigArray = ProxyConfigArrayItem[]; - type expressAppHook = (app: core.Express) => void; + interface Rewrite { + from: RegExp; + to: string; + } + + interface HistoryApiFallbackConfig { + disableDotRule?: boolean; + rewrites?: Rewrite[]; + } interface Configuration { - after?: expressAppHook; + /** Provides the ability to execute custom middleware after all other middleware internally within the server. */ + after?: (app: express.Application) => void; + /** This option allows you to whitelist services that are allowed to access the dev server. */ allowedHosts?: string[]; - before?: expressAppHook; + /** Provides the ability to execute custom middleware prior to all other middleware internally within the server. */ + before?: (app: express.Application) => void; + /** This option broadcasts the server via ZeroConf networking on start. */ bonjour?: boolean; - clientLogLevel?: string; + /** + * When using inline mode, the console in your DevTools will show you messages e.g. before reloading, + * before an error or when Hot Module Replacement is enabled. This may be too verbose. + */ + clientLogLevel?: 'none' | 'error' | 'warning' | 'info'; + /** Enable gzip compression for everything served. */ compress?: boolean; - contentBase?: string; + /** + * Tell the server where to serve content from. This is only necessary if you want to serve static files. + * devServer.publicPath will be used to determine where the bundles should be served from, and takes precedence. + */ + contentBase?: boolean | string | string[]; + /** + * When set to true this option bypasses host checking. + * THIS IS NOT RECOMMENDED as apps that do not check the host are vulnerable to DNS rebinding attacks. + */ disableHostCheck?: boolean; + /** + * This option lets you reduce the compilations in lazy mode. + * By default in lazy mode, every request results in a new compilation. + * With filename, it's possible to only compile when a certain file is requested. + */ filename?: string; - headers?: {}; - historyApiFallback?: boolean | {}; - host?: string; - hot?: boolean; - hotOnly?: boolean; - https?: boolean | spdy.ServerOptions; - inline?: boolean; - lazy?: boolean; - noInfo?: boolean; - open?: boolean; - openPage?: string; - overlay?: boolean | { - warnings: boolean; - errors: boolean; + /** Adds headers to all responses. */ + headers?: { + [key: string]: string; }; + /** When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. */ + historyApiFallback?: boolean | HistoryApiFallbackConfig; + /** Specify a host to use. By default this is localhost. */ + host?: string; + /** Enable webpack's Hot Module Replacement feature. */ + hot?: boolean; + /** Enables Hot Module Replacement (see devServer.hot) without page refresh as fallback in case of build failures. */ + hotOnly?: boolean; + /** By default dev-server will be served over HTTP. It can optionally be served over HTTP/2 with HTTPS. */ + https?: boolean | https.ServerOptions; + /** The filename that is considered the index file. */ + index?: string; + /** + * Toggle between the dev-server's two different modes. + * By default the application will be served with inline mode enabled. + * This means that a script will be inserted in your bundle to take care of live reloading, + * and build messages will appear in the browser console. + */ + inline?: boolean; + /** + * When lazy is enabled, the dev-server will only compile the bundle when it gets requested. + * This means that webpack will not watch any file changes. + */ + lazy?: boolean; + /** + * With noInfo enabled, messages like the webpack bundle information that is shown + * when starting up and after each save,will be hidden. + * Errors and warnings will still be shown. + */ + noInfo?: boolean; + /** When open is enabled, the dev server will open the browser. */ + open?: boolean; + /** Specify a page to navigate to when opening the browser. */ + openPage?: string; + /** Shows a full-screen overlay in the browser when there are compiler errors or warnings. Disabled by default. */ + overlay?: boolean | { + warnings?: boolean; + errors?: boolean; + }; + /** When used via the CLI, a path to an SSL .pfx file. If used in options, it should be the bytestream of the .pfx file. */ pfx?: string; + /** The passphrase to a SSL PFX file. */ pfxPassphrase?: string; + /** Specify a port number to listen for requests on. */ port?: number; - proxy?: proxyConfigMap | proxyConfigArray; + /** + * Proxying some URLs can be useful when you have a separate API backend development server + * and you want to send API requests on the same domain. + */ + proxy?: ProxyConfigMap | ProxyConfigArray; + /** + * When using inline mode and you're proxying dev-server, + * the inline client script does not always know where to connect to. + * It will try to guess the URL of the server based on window.location, but if that fails you'll need to use this. + */ public?: string; + /** The bundled files will be available in the browser under this path. */ publicPath?: string; + /** + * With quiet enabled, nothing except the initial startup information will be written to the console. + * This also means that errors or warnings from webpack are not visible. + */ quiet?: boolean; - setup?: expressAppHook; // will be depreacted in v3.0.0 and replaced by before + /** @deprecated Here you can access the Express app object and add your own custom middleware to it. */ + setup?: (app: express.Application) => void; + /** The Unix socket to listen to (instead of a host). */ socket?: string; + /** It is possible to configure advanced options for serving static files from contentBase. */ staticOptions?: serveStatic.ServeStaticOptions; - stats?: webpack.compiler.StatsOptions | webpack.compiler.StatsToStringOptions; + /** + * This option lets you precisely control what bundle information gets displayed. + * This can be a nice middle ground if you want some bundle information, but not all of it. + */ + stats?: string | webpack.Stats; + /** This option lets the browser open with your local IP. */ useLocalIp?: boolean; + /** Tell the server to watch the files served by the devServer.contentBase option. File changes will trigger a full page reload. */ watchContentBase?: boolean; + /** Control options related to watching the files. */ watchOptions?: webpack.WatchOptions; } } +declare module 'webpack' { + interface Configuration { + /** Can be used to configure the behaviour of webpack-dev-server when the webpack config is passed to webpack-dev-server CLI. */ + devServer?: WebpackDevServer.Configuration; + } +} + declare class WebpackDevServer { constructor( webpack: webpack.Compiler | webpack.MultiCompiler, diff --git a/types/webpack-dev-server/webpack-dev-server-tests.ts b/types/webpack-dev-server/webpack-dev-server-tests.ts index 5a23a60ad7..a73037e74c 100644 --- a/types/webpack-dev-server/webpack-dev-server-tests.ts +++ b/types/webpack-dev-server/webpack-dev-server-tests.ts @@ -1,6 +1,6 @@ import webpack = require('webpack'); import WebpackDevServer = require('webpack-dev-server'); -import * as core from 'express-serve-static-core'; +import { Application } from 'express'; const compiler = webpack({}); const multipleCompiler = webpack([]); @@ -46,7 +46,7 @@ const config: WebpackDevServer.Configuration = { "**": "http://localhost:9090" }, - setup: (app: core.Express) => { + setup: (app: Application) => { // 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) => { @@ -69,8 +69,7 @@ const config: WebpackDevServer.Configuration = { }, // It's a required option. publicPath: "/assets/", - headers: { "X-Custom-Header": "yes" }, - stats: { colors: true } + headers: { "X-Custom-Header": "yes" } }; // API example @@ -87,13 +86,23 @@ server.listen(8080, "localhost", () => { }); server.close(); -WebpackDevServer.addDevServerEntrypoints(config, { +const webpackConfig: webpack.Configuration = { + context: __dirname, + + mode: 'development', + + target: 'node', + + devServer: config +}; + +WebpackDevServer.addDevServerEntrypoints(webpackConfig, { publicPath: "/assets/", https: true }); WebpackDevServer.addDevServerEntrypoints( - [config], + [webpackConfig], { publicPath: "/assets/", https: true diff --git a/types/webpack/index.d.ts b/types/webpack/index.d.ts index 597c86fa52..116d551c24 100644 --- a/types/webpack/index.d.ts +++ b/types/webpack/index.d.ts @@ -90,8 +90,6 @@ declare namespace webpack { watchOptions?: Options.WatchOptions; /** Switch loaders to debug mode. */ debug?: boolean; - /** Can be used to configure the behaviour of webpack-dev-server when the webpack config is passed to webpack-dev-server CLI. */ - devServer?: any; // TODO: Type this /** Include polyfills or mocks for various node stuff */ node?: Node | false; /** Set the value of require.amd and define.amd. */