我最近学习了react和webpack.我在做项目的时候遇到了一个问题，当我打开index.html.在浏览器网络中显示bundle.js没有找到，而且我也看不到CSS文件。
当我打开index.html.在浏览器网络中显示bundle.js没有找到，也看不到CSS文件，请帮帮我。
我不知道为什么我的文件在网络中不显示.我的所有文件都成功捆绑了。
请帮我找出我的代码哪里错了。
我的文件夹结构
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
我的webpack配置
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"]
}
]
}
};
我的包.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"
}
}
索引.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>
将bundle.js的路径改为 src="publicbundle.js" 内的index.html文件可能会解决这个问题。
解释。
脚本标签指定bundle.js文件的位置为
src="publicbundle.js"
该路径没有前导符""。因此，该路径将被解释为相对于浏览器读取的当前文件的位置。
在路径中添加前导符将使浏览器从相对于文件根目录的路径中请求脚本文件。