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: path.join(__dirname, 'dist'),
    publicPath: path.join(__dirname, 'dist'),
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./dist",
    // hot: true,
  } 
}

Why won't webpack-dev-server server my app properly? I have 0% understanding of localhost, vs localhost/webpack-dev-server, vs publicPath, vs contentBase, etc.. I know all of these paths, and configuration keys are important to setting up my project properly but despite hours of reading about them, they remain as confusing as when I started.

If I go to localhost:8080/webpack-dev-server I see Get http://localhost:8080/bundle.js net:ERR_ABORTED` in the console.

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