fix: ensure devserver client options are configurable (#2034)

* fix: ensure devserver client options are configurable

When a custom `webpackConfig.devServer.client` option is set, they are
currently being overridden by the `baseConfig.client` field.

Ensure that field is extendible by consumers while also ensuring the
base config values stay fixed.

#2033

* fix: ensure all devServer options are overridable; add tests

Author: dannobytes

src/scripts/__tests__/create-server.spec.ts

@@ -61,3 +61,47 @@ test('createServer should return an object containing a development Webpack comp
 	expect(output.chunkFilename).toBe('build/[name].js');
 	done();
 });
+
+test('createServer should apply some base config options', () => {
+	process.chdir('test/apps/basic');
+	const config = {
+		...getConfig(),
+		serverHost: 'localhost',
+		serverPort: 6000,
+	};
+	const result = createServer(config, 'development');
+	expect(result).toBeTruthy();
+	expect(result.compiler).toBeTruthy();
+	expect(result.compiler.options.devServer).toMatchObject({
+		host: 'localhost',
+		port: 6000,
+		compress: true,
+		hot: true,
+		client: { logging: 'none' },
+		webSocketServer: 'ws',
+	});
+});
+
+test('createServer should allow overriding default devServer options', () => {
+	process.chdir('test/apps/basic');
+	const config = {
+		...getConfig(),
+		webpackConfig: {
+			devServer: {
+				client: {
+					overlay: false,
+					progress: true,
+				},
+			},
+		},
+	};
+	const result = createServer(config, 'development');
+	expect(result).toBeTruthy();
+	expect(result.compiler).toBeTruthy();
+	expect(result.compiler.options.devServer).toMatchObject({
+		client: {
+			overlay: false,
+			progress: true,
+		},
+	});
+});

src/scripts/create-server.ts

@@ -33,13 +33,14 @@ export default function createServer(
 		},
 	};
 
-	const webpackDevServerConfig: Configuration = {
-		...webpackConfig.devServer,
+	// Allow custom devServer options to override base config.
+	webpackConfig.devServer = {
 		...baseConfig,
+		...webpackConfig.devServer,
 	};
 
 	const compiler = webpack(webpackConfig);
-	const devServer = new WebpackDevServer(webpackDevServerConfig, compiler);
+	const devServer = new WebpackDevServer(webpackConfig.devServer, compiler);
 
 	// User defined customizations
 	if (config.configureServer) {