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'
}
}