'Webpack-dev-server "Cannot GET /"
i'm trying to get my webpack-dev-server to run but i face always the error "Cannot Get /" at the browser. I know that there are serveral questions with the same error, but none of them helped me, so now i will try my luck :)
these are my webpack-config.js configurations:
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/app.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.js']
}
};
package.json:
{
"name": "ts",
"version": "1.0.0",
"description": "test",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^4.0.0",
"html-loader": "^3.1.0",
"html-webpack-plugin": "^5.5.0",
"lite-server": "^2.6.1",
"ts-loader": "^9.2.8",
"typescript": "^4.6.2",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
},
"dependencies": {
"lodash": "^4.17.21"
}
}
And the script to find the bundle.js from index.html looks like that:
<script type="module" src="dist/bundle.js"></script>
Side note: index.html is not in the dist folder like bundle.js, but i get the same error anyways.
UPDATE| SOLVED
If anyone will face the same issue:
"webpack-dev-server" is since 5.0 (or so) no longer supported. You have to change it to
"start": "webpack serve",
Moreover, here my webpack-config.js file changes, which did the trick:
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/app.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
},
devServer: {
static: {
directory: path.join(__dirname, '/')
}
},
.
.
.
};
Solution 1:[1]
Try setting output.publicPath
to auto
https://webpack.js.org/guides/public-path/#automatic-publicpath
and run dev server via webpack:
https://github.com/evenstensberg/webpack-react-boilerplate/blob/master/package.json#L9
You also need a html file:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Even Stensberg |