Webpack dev server cannot get `http://localhost/8080/bundle.js`

Question

Given this config:

var webpack = require(\'webpack\');
const path = require(\'path\')

module.exports = {
  entry: \"./src/index.js\",
  output: {
    path:          


        

Answer 1

Below are simple and straight forward rules for webpack & webpack-dev-server :

1. output.path : It needs to be an absolute path or /. You can get it easily using path.join
2. output.filename : This needs to be the name of output file without any extra file path.
3. devServer.contentBase : It is the physical location on the disk which is served as the root directory of webpack-dev-server when you open http://localhost:8080

By convention, we keep both output.path and devServer.contentBase same. The tricky part is when you run webpack cmd, it generates the physical bundle.js file.

But when you run webpack-dev-server, NO PHYSICAL OUTPUT file is generated, rather it keeps the generated output in memory to avoid File-Write operate which in turn helps in faster development/debugging cycle.

So any change you make in src.js or main.js file, it will generate the output but won't write that to disk and wepack-dev-server reads that directly from the memory.

4. output.publicPath : This is used by webpack, webpack-dev-server & other plug-in to generate the output or serve the generated bundle. The default value is /.

It is VIRTUAL PATH and need not be present on the physical disk. Example : final application name if multiple apps are hosted on the same server like /app1, /app2, or some external CDN path /CDN-Path.

It is also helpful for React-Router <BrowserRouter basename='/app1'>

Now to refer the bundle output file that is generated & kept in the memory , you need to append the output.publicPath i.e. Virtual Path in the browser's URL.

The final URL for webpack-dev-server will be : http://localhost:8080/<output.publicPath>/<output.filename>

In your case, either you change the publicPath: path.join(__dirname, 'dist') to publicPath: '/dist' if it contains any spaces. You can check it by printing the value of path.join(__dirname, 'dist') which returns the absolve path [different on MacOS & Window system].

http://localhost:8080/dist/bundle.js

If you want to dig further deeper, then here is the URL

https://medium.com/p/webpack-understanding-the-publicpath-mystery-aeb96d9effb1