I'm trying to setup a basic webpack config for react and serve it in dev mode using webpack dev server. Webpack compiles everything just fine, but the files aren't served when using webpack dev server... I am hosting the project on a VPS and tested whether the server is reachable using a boilerplate create-react-app dev server - it is. I can see the project just fine going to 'http://serverIPv4:3000'. Webpack dev server project is configured to serve on port 9000 - and that does not work, even though the files are being compiled. It also doesn't work on default port 8080 or 3000. What am I missing?
webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
resolve: {
extensions: [
'.js',
'.jsx'
]
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
compress: true,
port: 9000
},
};
module.exports = config;
devDependencies:
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1"
project structure:
dist
|-index.html
src
|-App.js
|-index.js
|-styles.css
Console output:
? ?wds?: Project is running at http://localhost:9000/
? ?wds?: webpack output is served from /
? ?wds?: Content not from webpack is served from /home/ubuntu/rcw-webpack/dist
? ?wdm?: asset bundle.js 1.36 MiB [emitted] (name: main)
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/ 1.29 MiB 32 modules
modules by path ./src/ 4.32 KiB
modules by path ./src/*.js 3.65 KiB
./src/index.js 244 bytes [built] [code generated]
./src/App.js 3.41 KiB [built] [code generated]
modules by path ./src/*.css 681 bytes
./src/styles.css 327 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles.css 354 bytes [built] [code generated]
webpack 5.11.1 compiled successfully in 2535 ms
? ?wdm?: Compiled successfully.
UPDATE: package.json:
{
"name": "rcw-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"clean": "rm dist/bundle.js",
"dev": "webpack --mode development",
"start": "webpack serve --mode development --env development",
"build-prod": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"style-loader": "^2.0.0",
"ts-loader": "^8.0.14",
"typescript": "^4.1.3",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1"
},
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1",
"socket.io-client": "^3.0.5"
}
}