feat: #169 ko.config.js support devServer client (#170)

* feat: #169 ko.config.js support devServer client

* docs(changeset): ko.config.js support devServer client

Author: liuxy0551

.changeset/spicy-fireants-tell.md

@@ -0,0 +1,5 @@
+---
+'ko': patch
+---
+
+ko.config.js support devServer client

packages/ko/src/actions/dev.ts

@@ -17,26 +17,33 @@ class Dev extends ActionFactory {
 
   private get devServerConfig(): DevServerConfiguration {
     const { serve, publicPath } = this.service.config;
-    const { host, port, proxy, staticPath, historyApiFallback = false } = serve;
+    const {
+      host,
+      port,
+      proxy,
+      client = {
+        overlay: {
+          errors: true,
+          warnings: false,
+          runtimeErrors: true,
+        },
+      },
+      staticPath,
+      historyApiFallback = false,
+    } = serve;
     return {
       port,
       host,
       hot: true,
       proxy,
+      client,
       static: {
         directory: staticPath,
         watch: true,
         publicPath,
       },
       setupExitSignals: false,
       allowedHosts: 'all',
-      client: {
-        overlay: {
-          errors: true,
-          warnings: false,
-          runtimeErrors: true,
-        },
-      },
       historyApiFallback,
     };
   }

packages/ko/src/types.ts

@@ -2,6 +2,7 @@ import { Pattern } from 'copy-webpack-plugin';
 import { Plugin } from 'postcss';
 import { IKeys, IOpts } from 'ko-lints';
 import { IOpts as AutoPolyfillsWebpackPluginOptions } from '@dtinsight/auto-polyfills-webpack-plugin';
+import { ClientConfiguration } from 'webpack-dev-server';
 
 export type IOptions = {
   //common configs
@@ -86,13 +87,15 @@ export type IOptions = {
   // dev, or serve configs
   /**
    * Options for the development server.
+   * Docs url: https://webpack.js.org/configuration/dev-server/
    * @param {{proxy?: Record<string, any>, host: string, port: number, staticPath?: string, historyApiFallback?: any, compilationSuccessInfo?: { messages: string[]; notes?: string[] }}}
    */
   serve: {
     proxy?: Record<string, any>;
     host: string;
     port: number;
     staticPath?: string;
+    client?: boolean | ClientConfiguration | undefined;
     historyApiFallback?: any;
     compilationSuccessInfo?: { messages: string[]; notes?: string[] };
   };

website/docs/configuration.md

@@ -6,6 +6,8 @@ title: Configuration
 You can custom ko's action via **ko.config.js**, below are supported configurations:
 
 ``` typescript
+import { ClientConfiguration } from 'webpack-dev-server';
+
 export type IOptions = {
   //common configs
   cwd: string; //current working directory
@@ -32,6 +34,7 @@ export type IOptions = {
     host: string; // host of dev server
     port: number; // port of dev server
     staticPath?: string; // static path that will be watch of dev server
+    client?: boolean | ClientConfiguration | undefined; // client of dev server
     compilationSuccessInfo?: { messages: string[]; notes?: string[] }; // log after successful compilation, as same as friendly-errors-webpack-plugin
   };
   // experimental features

website/i18n/zh-CN/docusaurus-plugin-content-docs/current/configuration.md

@@ -32,6 +32,7 @@ export type IOptions = {
     host: string; // 开发服务器的主机名
     port: number; // 开发服务器的端口
     staticPath?: string; // 监视的资源路径
+    client?: boolean | ClientConfiguration | undefined; // 日志、错误捕获等配置项
     compilationSuccessInfo?: { messages: string[]; notes?: string[] }; // 成功编译后的日志，与 friendly-errors-webpack-plugin 相同
   };
   // 实验性功能