Support string array for devServer.static.directory

[PierBJX]

Using webpack dev server, it is possible to serve static files using the property:

module.exports = {
  // ...
  devServer: {
    static: [path.join(__dirname, 'assets'), path.join(__dirname, 'css')],
  },
};

It works properly, however, if I want to add a publicPath, I need to create two objects like this:

module.exports = {
  // ...
  devServer: {
    static: [
       {
          directory: path.join(__dirname, 'assets'),
          publicPath: '/serve-public-path-url',
       },
       {
          directory: path.join(__dirname, 'css'),
          publicPath: '/serve-public-path-url',
       },
    ],
  },
};

Whereas, it could make sense to create only one object with two paths in the directory such like that:

module.exports = {
  // ...
  devServer: {
    static:  {
        directory: [path.join(__dirname, 'assets'), path.join(__dirname, 'css')],
        publicPath: '/serve-public-path-url',
    }
  },
};

What do you think ?

[alexander-akait]

Yes, because static middleware accepts only on directory https://github.com/expressjs/serve-static, but we can handle them using multiple public paths, it was done to avoid misleading and complex configurations which can lead to the problems

[alexander-akait]

Please use

/// <reference path="node_modules/webpack-dev-server/types/lib/Server.d.ts"/>
import type { Configuration } from "webpack";

// Your logic

Or you can import type from webpack-dev-server, i.e.

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;

typescript doesn't import other types from other packges by default, so we need to say it (also it can be done using tsconfig.json)

[PierBJX]

Thanks!

[evenfrost]

@alexander-akait would be great if this could be added to the readme. This is a pretty common error when you're adding webpack-dev-server in your TypeScript webpack project, and googling first leads to the @types/webpack-dev-server issue, which is not relevant anymore.

[alexander-akait]

@evenfrost Yes, make sense, can you help us and send a PR? It should be easy

[evenfrost]

@alexander-akait done.