diff --git a/README.md b/README.md index 7cadb5cd62..0cf5920952 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,7 @@ fast in-memory access to the webpack assets. - [With the CLI](#with-the-cli) - [With NPM Scripts](#with-npm-scripts) - [With the API](#with-the-api) + - [With TypeScript](#with-typescript) - [The Result](#the-result) - [Browser Support](#browser-support) - [Support](#support) @@ -249,6 +250,30 @@ While it's recommended to run webpack-dev-server via the CLI, you may also choos See the related [API documentation for `webpack-dev-server`](https://webpack.js.org/api/webpack-dev-server/). +### With TypeScript + +If you use TypeScript in the webpack config, you'll need to properly type `devServer` property in order to avoid TS errors (e.g. `'devServer' does not exist in type 'Configuration'`). For that use either: + +```ts +/// +import type { Configuration } from "webpack"; + +// Your logic +``` + +Or you can import the type from `webpack-dev-server`, i.e. + +```ts +import type { Configuration as DevServerConfiguration } from "webpack-dev-server"; +import type { Configuration } from "webpack"; + +const devServer: DevServerConfiguration = {}; +const config: Configuration = { devServer }; + +// module.exports +export default config; +``` + ### The Result Either method will start a server instance and begin listening for connections