Webpack and webpack dev server not serving static files

Question

In the past I've been able to serve static files during development, but now I can't seem to do it anymore, given the latest verions of webpack and webpack-dev-server of 4.6.0 and 3.1.3.

If I check my chrome inspector (Ctrl + Shift + I) -> Sources tab and look under the Network tab and localhost:8080, I can only see two entries:

(index)
bundle.js

I should see my image files there that I'm trying to serve, but I don't. Its really frustrating when I see something like this in my console:

Content not from webpack is served from C:\Users\PC-user\WebstormProjects\untitled/assets/

But in reality, nothing is actually served. It feels rather betraying.

Anyway, these are my files:

folder structure

assets
node_modules
src
package.json
package-lock.json
webpack.config.js

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  devServer: {
    // contentBase: './dist',
    contentBase: __dirname + "/assets/",
    hot: true,
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  output: {
    path: __dirname + "/assets/",
    filename: 'bundle.js',
    chunkFilename: '[name].js'
  },
};

Hadnazzar Hadnazzar · Accepted Answer · 2020-11-04T20:17:16

Try to change your development server settings as below

  const path = require('path');
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    open: true,
    port: 3000,
    historyApiFallback: true,
    hot: true,
    publicPath: '/',
  },

Webpack and webpack dev server not serving static files

2 Answers