Cannot GET / when '#' in directory path

[ErikGrijzen]

• Operating System: Moc OS Sierra 10.12.5
• Node Version: v8.11.2
• NPM Version: v5.6.0
• webpack Version: 4.11.1
• webpack-dev-server Version: 3.1.4

• This is a bug
• This is a modification request

Code

This bug is similar to #1373, but since it's only mentioning spaces and that it only happens on windows, I decided to create a new issue ticket. Feel free to merge both together if that's easier 👍

When you run webpack dev server it cannot load the /index.html and you receive a Cannot GET / Error. The problem comes from having a # in your directory path, i.e:

/path/to/my/#1/project/<project lives here>

WORKAROUND:
It works fine if you remove the # from the path.

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin('dist', {}),
        new MiniCssExtractPlugin({
            filename: 'style.[contenthash].css',
        }),
        new HtmlWebpackPlugin({
            inject: false,
            hash: true,
            template: './src/index.html',
            filename: 'index.html'
        }),
        new WebpackMd5Hash(),
        new CopyWebpackPlugin([
            {
                from: 'src/api',
                to: 'api',
                toType: 'dir'
            }
        ])
    ],
    stats: {
        colors: true
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 8000,
    },
    devtool: 'source-map'
};

Expected Behavior

The webpack dev server is loading the index.html that is copied by the HtmlWebpackPlugin into the /dist folder.

Actual Behavior

I'm getting a blank page with an error: Cannot GET /.

For Bugs; How can we reproduce the behavior?

Try to run the webpack-dev-server from a project that has a # in the directory name, for example:

/path/to/my/#1/project/<project lives here>

[michael-ciniawsky]

Closing in favor of

webpack/webpack-dev-middleware#333 (Issue)
webpack/webpack-dev-middleware#334 (PR)