I have configured WebPack for my application and added webpack-dev-server. It compiles successfully after running and gives me "Project is running at http://localhost:9000/". However, when I try to open it in my browser I get a "This site can't be reached" page with the following error:
ERR_CONNECTION_REFUSED
Any fix suggestions will be greatly appreciated!
Snippets from my package.json file:
"scripts": {
"build": "webpack --config webpack.config.js",
"start:dev": "webpack-dev-server"
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
Snippet from my webpack.config.js file:
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
devServer.clientAllows to set log level in the browser, e.g. before reloading, before an error or when Hot Module Replacement is enabled. webpack.config.js module.
When you run webpack dev server what webpack dev server does is, instead of creating a bundled file ( e.g. bundle. js ) in dist folder, it creates a bundled file in memory. It then serves that information to express , and then express creates a web socket connection to render that on the browser on a certain port no.
Either method will start a server instance and begin listening for connections from localhost on port 8080 . webpack-dev-server is configured by default to support live-reload of files as you edit your assets while the server is running. See the documentation for more use cases and options.
For those who might have the same issue, I seem to have found a solution shortly after posting this question. Here it is: link.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With