Webpack dev server cannot get

Question

I' am using Webpack-4. Current behavior is that when webpack-dev-server is running, files under /build not get updated at all and it is showing the file directory.

If I delete the files under /build, webpack-dev-server is giving cannot get/. I assume, It should load them from memory.

const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
   template: "./src/index.html",
   filename: "./index.html"
});

const path = require('path');

module.exports = {
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build/'),
},

module: {
    rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["env","react"]
                }
            }
        },
        { 
            test: /\.html$/,
            use: [{
                loader: "html-loader",
                options: {
                    minimize: true
                }
            }]
        }
    ]
},
plugins: [
    htmlPlugin
],
devServer: {       
    contentBase: "./build/",
    port: 5555
}
}

Answer 1

A few tips that helped me understand and debug my local webpack-dev-server config:

1. To see where the files are served (in-memory) by webpack-dev-server, type http://localhost:{yourport}/webpack-dev-server in your browser. Then you can click on one of the file (link) and it will show you the route it's served from and the content of the file.
2. When you launch webpack-dev-server (i.e. using npm start), it shows you in the console where it's serving content from based on your webpack.config.js file. (See below for a detailed explanation)
3. If you want Hot Reload (I don't see why not), your need to specify it on the command line (In your package.json start script) and not in the config file. For some reason, putting it into the config file was not working. So use something like:

package.json

"scripts": {
    "start": "webpack-dev-server --config webpack.config.js --hot --inline"
},

webpack.config.js Config

...
output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, 'public', 'scripts'),
},
...
devServer: {
    contentBase: path.join(__dirname, "public"),
    publicPath: 'http://localhost:8080/scripts/',
    port: 8080
},
...

Output

 i ｢wds｣: Project is running at http://localhost:8080/    
 i ｢wds｣: webpack output is served from http://localhost:8080/scripts/
 i ｢wds｣: Content not from webpack is served from C:\Workspace\WebSite\public

On line 2 of the output, notice that because of contentBase in the config, http://localhost:8080/scripts/ actually points to C:\Workspace\WebSite\public\scripts on the disk. (And this is where webpack would also put its files :) !!!)

On the publicPath config, the trailing backslash is important.