npm start displays generated js file in browser - reactjs

Question

I'm getting generated js file in browser when I'm doing npm start.
I'm using
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
"webpack-manifest-plugin": "^2.0.4"
Below is my webpack.config.js.
Please tell me what I'm doing wrong here
I'm getting generated js file on browser when I do npm start.
I'm using
"webpack": "^4.29.6"
"webpack-cli": "^3.3.0"
"webpack-dev-server": "^3.2.1"
Below is my webpack.config.js
Please tell me what I'm doing wrong here.
const cssFilename = 'static/css/style.[hash].css';
module.exports = {
entry: './src/index.js',
externals: [nodeExternals()],
mode: "production",
resolve: {
extensions: ['.js', '.json', '.jsx', '.css', '.svg']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
include: path.resolve(__dirname, 'src'),
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/env', '#babel/react']
}
}
},
{
test: /\.css?$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components)/,
use: ['raw-loader','style-loader','to-string-loader','css-loader']
}
]
},
devtool: 'inline-source-map',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'static/js/bundle.[hash].js',
chunkFilename: 'static/js/bundle.[hash].js',
publicPath: './'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
filename: './index.html',
template: './public/index.html'
})
]
};
Package.json
{
"name": "demo",
"version": "1.0.0",
"description": "demo",
"private": true,
"jest": {
"collectCoverageFrom": [
"src/Actions/"
],
"coverageThreshold": {
"global": {
"branches": 10,
"functions": 10,
"lines": 10,
"statements": 10
}
}
},
"scripts": {
"watch": "webpack --watch",
"start": "webpack-dev-server",
"build": "webpack",
"test": "set CI=true &&jest --coverage"
},
"homepage": ".",
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.3",
"#babel/plugin-proposal-class-properties": "^7.3.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.2.3",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "9.0.0",
"babel-loader": "^8.0.5",
"babel-register": "^6.26.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.5.0",
"jest-environment-enzyme": "^7.0.1",
"jest-enzyme": "^7.0.1",
"mini-css-extract-plugin": "^0.5.0",
"raw-loader": "^0.5.1",
"react-svg-loader": "^2.1.0",
"source-map-loader": "^0.2.4",
"to-string-loader": "^1.1.5",
"ts-jest": "^23.10.1",
"typescript": "^3.0.3",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
"webpack-manifest-plugin": "^2.0.4"
},
"exclude": [
"node_modules"
],
"dependencies": {
"axios": "^0.18.0",
"axios-mock-adapter": "^1.16.0",
"babel-preset-react-app": "^7.0.2",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"file-saver": "^1.3.8",
"lodash": "^4.17.10",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-loader": "^3.0.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-redux": "^5.1.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack-node-externals": "^1.7.2"
}
}