Webpack-dev-server: webpack output is served from undefined

[loadingwyn]

Describe the bug

The output of webpack doesn't get served.

What is the current behavior?

My config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './index.ts',
  context: path.resolve(__dirname),
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
  devServer: {
    contentBase: './demo',
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },

};

Command:

webpack serve --config ./demo/webpack.config.js --mode development --open chrome

To Reproduce

Steps to reproduce the behavior:

1. Define a devServer config in your webpack config file
2. Run webpack serve --config webpack.dev.js

Expected behavior

The output js file can be served by dev server

Additional context

[cyyynthia]

I've encountered this issue on my end and after some digging, it appears specifying publicPath inside devServer options in my config solved it.

{
  ...,
  devServer: {
    ...,
    publicPath: '/dist'
  }
}

[dwiyatci]

@Bowser65 🤦🏻‍♂️ isn't that weird? If devServer.publicPath not specified, it should actually fallback/be default to '/'.

https://webpack.js.org/configuration/dev-server/#devserverpublicpath-

🤷🏻‍♂️