Reactjs Bundle.js和Css文件未通过webpack加载_Reactjs_Webpack_Babeljs

Reactjs Bundle.js和Css文件未通过webpack加载

reactjs webpack

Reactjs Bundle.js和Css文件未通过webpack加载,reactjs,webpack,babeljs,Reactjs,Webpack,Babeljs,我最近学习了react和webpack。我在做项目时遇到了一个问题当我在浏览器网络中打开index.html时，它会显示bundle.js not found.。而且我看不到CSS文件。请帮帮我我不知道为什么我的文件没有在网络上显示。我的所有文件已成功绑定请帮我找出我的代码哪里错了我的文件夹结构 node modules app-(contains js jsx and css files) public- (contains single bundle file.There is n

我最近学习了react和webpack。我在做项目时遇到了一个问题

当我在浏览器网络中打开index.html时，它会显示bundle.js not found.。而且我看不到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

我的网页包配置

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"]
            }

        ]

    }

};

mypackage.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>


反应

在index.html文件中将bundle.js的路径更改为src=“/public/bundle.js”，可以解决此问题

说明：

script标记将bundle.js文件的位置指定为

src=“public/bundle.js”

此路径没有前导“/”。因此，路径将相对于浏览器正在读取的当前文件的位置进行解释

向路径添加前导/将使浏览器从相对于文档根的路径请求脚本文件。

您是否在

公用文件夹中有bundle.js
文件？如果没有，您需要运行构建。是的，我公开了它。它成功构建，但没有显示文件（未找到bundle.js），因为在定义包的文件名时引号位于错误的位置，并且字符串中有空格：filename:“bundle.js”
。您正在创建带有前导空格的bundle.js
。