I recently learned react and webpack.I got into a problem while making my project.
When I am opening index.html.In browser network it is showing bundle.js not found..and also I cant see CSS files. please help me.
I don't know why my files are not showing in the network. My all files got successfully bundled.
Please help me out where my code is wrong.
My folder structure
node modules
app-(contains js jsx and css files)
public- (contains single bundle file.There is no bundle.js.map file)
package.json
package-lock.json
webpack.config.js
index.html
my webpack config
var path=require("path");
module.exports={
entry:path.resolve(__dirname,"app"),
output:{
path:path.resolve(__dirname,"public"),
filename:" bundle.js",
},
module:{
rules:[
{
test:/\.jsx?$/,
include:path.resolve(__dirname,"app"),
use:[{loader:'babel-loader',
options: {
presets: ['@babel/preset-react',{
'plugins': ['@babel/plugin-proposal-class-properties']}]
}
}]
},
{
test:/\.css$/,
include:path.resolve(__dirname,"app"),
use:["style-loader","css-loader"]
}
]
}
};
my package .json
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -p"
},
"author": "",
"license": "ISC",
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.9.6",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.3",
"express": "^4.17.1",
"nodeman": "^1.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-actions": "^2.6.5",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-dev-server": "^3.11.0"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"webpack-cli": "^3.3.11"
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
<title>React</title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript" src="public/bundle.js"></script>
</html>