如何在Django中获得适当的加载程序来处理此文件类型？

我刚刚开始了一个django和react项目。每当我尝试加载一些css时，无论是普通css还是从引导加载，我都会遇到以下错误： 我遵循了以下教程： 我将.bablrc和webpack.config.js移动到我的项目根文件夹中。以前它位于前端应用程序文件夹中。请让我知道我错过了什么

ERROR in ./src/components/App.js 39:6
Module parse failed: Unexpected token (39:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   render() {
|     return (
>       <Table striped bordered hover>
|   <thead>
|     <tr>
 @ ./src/index.js 1:0-35

My package.json:

module.exports = {
    module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
      }
    };

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development ./src/index.js --output ./static/frontend/main.js",
    "build": "webpack --mode production ./src/index.js --output ./static/frontend/main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.4.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "ts-loader": "^6.2.2",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "^4.4.1",
    "classnames": "^2.2.6",
    "primeicons": "^2.0.0",
    "primereact": "^4.1.2",
    "react-bootstrap": "^1.0.0"
  }
}

{
    "presets": [
        "@babel/preset-env", "@babel/preset-react"
    ],
    "plugins": [
        "plugin-proposal-class-properties"
    ]
}

import React, { Component } from "react";
import Table from 'react-bootstrap/Table'
import { render } from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import './app.css'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false,
      placeholder: "Loading"
    };
  }

  componentDidMount() {
    fetch("api/property")
      .then(response => {
        if (response.status > 400) {
          return this.setState(() => {
            return { placeholder: "Something went wrong!" };
          });
        }
        return response.json();
      })
      .then(data => {
        this.setState(() => {
          return {
            data,
            loaded: true
          };
        });
      });
  }

  render() {
    return (
      <Table striped bordered hover>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colSpan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</Table>
    );
  }
}

export default App;

const container = document.getElementById("app");
render(<App />, container);

My.babel.rc:

module.exports = {
    module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
      }
    };

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development ./src/index.js --output ./static/frontend/main.js",
    "build": "webpack --mode production ./src/index.js --output ./static/frontend/main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.4.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "ts-loader": "^6.2.2",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "^4.4.1",
    "classnames": "^2.2.6",
    "primeicons": "^2.0.0",
    "primereact": "^4.1.2",
    "react-bootstrap": "^1.0.0"
  }
}

{
    "presets": [
        "@babel/preset-env", "@babel/preset-react"
    ],
    "plugins": [
        "plugin-proposal-class-properties"
    ]
}

import React, { Component } from "react";
import Table from 'react-bootstrap/Table'
import { render } from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import './app.css'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false,
      placeholder: "Loading"
    };
  }

  componentDidMount() {
    fetch("api/property")
      .then(response => {
        if (response.status > 400) {
          return this.setState(() => {
            return { placeholder: "Something went wrong!" };
          });
        }
        return response.json();
      })
      .then(data => {
        this.setState(() => {
          return {
            data,
            loaded: true
          };
        });
      });
  }

  render() {
    return (
      <Table striped bordered hover>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colSpan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</Table>
    );
  }
}

export default App;

const container = document.getElementById("app");
render(<App />, container);

My App.js:

module.exports = {
    module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
      }
    };

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development ./src/index.js --output ./static/frontend/main.js",
    "build": "webpack --mode production ./src/index.js --output ./static/frontend/main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.4.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "ts-loader": "^6.2.2",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "^4.4.1",
    "classnames": "^2.2.6",
    "primeicons": "^2.0.0",
    "primereact": "^4.1.2",
    "react-bootstrap": "^1.0.0"
  }
}

{
    "presets": [
        "@babel/preset-env", "@babel/preset-react"
    ],
    "plugins": [
        "plugin-proposal-class-properties"
    ]
}

import React, { Component } from "react";
import Table from 'react-bootstrap/Table'
import { render } from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import './app.css'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false,
      placeholder: "Loading"
    };
  }

  componentDidMount() {
    fetch("api/property")
      .then(response => {
        if (response.status > 400) {
          return this.setState(() => {
            return { placeholder: "Something went wrong!" };
          });
        }
        return response.json();
      })
      .then(data => {
        this.setState(() => {
          return {
            data,
            loaded: true
          };
        });
      });
  }

  render() {
    return (
      <Table striped bordered hover>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colSpan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</Table>
    );
  }
}

export default App;

const container = document.getElementById("app");
render(<App />, container);

import React，{Component}来自“React”；
从“react引导/表”导入表
从“react dom”导入{render}；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“./app.css”
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
加载：false，
占位符：“加载”
};
}
componentDidMount（）{
获取（“api/属性”）
。然后（响应=>{
如果（response.status>400）{
返回此.setState（（）=>{
返回{占位符：“出了问题！”}；
});
}
返回response.json（）；
})
。然后（数据=>{
此.setState（（）=>{
返回{
数据，
加载：正确
};
});
});
}
render（）{
返回(
#
名字
姓
用户名
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
小鸟拉里
@推特
);
}
}
导出默认应用程序；
const container=document.getElementById（“应用”）；
渲染（，容器）；

适用于有相同问题的人

您需要为html/JS/JSX/html提供适当的加载程序。安装您选择的css loaders npm软件包并将其添加到您的网页中，如下所示：

const HtmlWebPackPlugin = require("html-webpack-plugin");

    module.exports = {
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          },
          {
            test: /\.html$/,
            use: [
              {
                loader: "html-loader"
              }
            ]
          },
          {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
          },
        ]
      },
      plugins: [
        new HtmlWebPackPlugin({
          template: "./src/index.html",
          filename: "./index.html"
        })
      ]
    };

---

对于那些有同样问题的人

您需要为html/JS/JSX/html提供适当的加载程序。安装您选择的css loaders npm软件包并将其添加到您的网页中，如下所示：

const HtmlWebPackPlugin = require("html-webpack-plugin");

    module.exports = {
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          },
          {
            test: /\.html$/,
            use: [
              {
                loader: "html-loader"
              }
            ]
          },
          {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
          },
        ]
      },
      plugins: [
        new HtmlWebPackPlugin({
          template: "./src/index.html",
          filename: "./index.html"
        })
      ]
    };