webpack-dev-server 'Cannot GET /'

I have the following webpack config:

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + '/dist',
    // publicPath: __dirname + '/dist/',
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "/dist",
    hot: true,
  } 
}

My understanding is that contentBase tells the webpack dev server where to serve files from. So if I go to localhost:8080/test.txt, under this configuration the file at myProjectRoot/dist/test/txt will be sent by the server to the browser. Is that correct? What does output.publicPath have to do with all that?

Now I have index.html and bundle.js sitting in myProjectRoot/dist/ right now. (although I think bundle.js is a bit of a confusing factor because its actually the in memory bundle that is returned by webpack-dev-server but nonetheless). Given my previous paragraph, I'd expect the server to return index.html to the browser. Since the contentBase is /dist and index.html's path on disk is ./dist/index.html.

But instead I see: Cannot GET /

So again, if I go to http://localhost:8080/bundle.js I see the full javascript bundle (up to date with what was last saved in my text editor). But then /index.html wins up with Cannot GET /?

What am I missing?

Solution 1:

Maybe you can try to add static to the devServer?

I got this information from: https://webpack.js.org/configuration/dev-server/#devserverwatchfiles

I've put the file in the same folder, so I use ./ for my path.

This is how I did it:

devServer: {
   //....//
   static: {                               
     directory: path.join(__dirname, './'),  
     watch: true
   }
}

Solution 2:

Alex. You wrote that:

My understanding is that contentBase tells the webpack dev server where to serve files from

this is not exactly right. contentBase option is used to tell server where to serve only static files. But the problem is that when you are working with webpack-dev-server it generates dynamic output (bundle) in memory, so you don't have the static content to serve.

1) You should remove contentBase option as by default webpack-dev-server uses output.path value as the path to serve files from.

2) Then, right now you don't have index.html in your ./dist folder. If you want your index.html file to be generated and served by dev server you should use html-webpack-plugin that generates index.html file with all bundled files included as links in it. If you need more than default markup that this plugin generates you should look at its template option

so your webpack cofig might look like:

const HtmlWebpackPlugin = require("html-webpack-plugin")
const path = require("path")

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    // module: { rules: [ ... ] }
    devServer: {
        index: index.html
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ]
}

Solution 3:

You need to set relative or absolute path in devServer.contentBase.
webpack-dev-server do not use your project as root directory, so it does not resolve /dist to folder within your project directory.

Try this:

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + '/dist',
    filename: "bundle.js"
  },
  devServer: {
    contentBase: __dirname + '/dist'
    // contentBase: 'dist'
  } 
}