1

After upgrading webpack-dev-server from v3 to v4, I found two odd inconsistencies.

  1. webpack-dev-server publicPath does not work anymore, without pairing it with the new static option.
    • In the past, this was enough to make things work:
    {
      // ...
      devServer: {
        publicPath: '/'
      }
    }
    
    • But now this is required instead:
    {
      // ...
      devServer: {
        devMiddleware: {
          publicPath: '/'
        },
        static: [
          {
            directory: context.replace(/\//g, '\\'),
            publicPath: '/'
          }
        ]
      }
    }
    
  2. The second problem is also visible in the code above. You can see in the new version above that my context has a weird hack: I have to replace forward slashes with backward slashes on Windows - context.replace(/\//g, '\\'). If I don't do that, I am punished by an inaccurate URL detection algorithm. Since forward slashes are perfectly fine on Windows, it should not complain about it not being a directory. Windows' own tools all think it is a directory, but webpack-dev-server does not:
    Error: Using a URL as static.directory is not supported
        at getStaticItem (c:\thecode\node_modules\webpack-dev-server\lib\Server.js:557:15)
        at c:\thecode\node_modules\webpack-dev-server\lib\Server.js:1046:16
        at Array.map (<anonymous>)
        at Server.normalizeOptions (c:\thecode\node_modules\webpack-dev-server\lib\Server.js:1041:39)
        at Server.start (c:\thecode\node_modules\webpack-dev-server\lib\Server.js:2252:16)
        at Command.<anonymous> (c:\thecode\node_modules\@webpack-cli\serve\lib\index.js:242:38)
        at async Promise.all (index 1)
        at async Command.<anonymous> (c:\thecode\node_modules\webpack-cli\lib\webpack-cli.js:1672:7)
    

My setup:

webpack: 5
OS: Windows 10
Node: 16

Is there something I am doing wrong here? Is that documented/expected behavior? Or is it something I should file on their Github issue page?

Workaround for (2): the URL problem can be fixed via path.resolve. I.e.: directory: path.resolve(context).

Domi
  • 22,151
  • 15
  • 92
  • 122

0 Answers0