Как мне получить соответствующий загрузчик для обработки файлов этого типа в Django?

Question

Я только начал django и реагировал на проект. Всякий раз, когда я пытаюсь загрузить css, будь то простой css или из bootstrap, я получаю следующую ошибку: я следую следующему руководству: https://www.valentinog.com/blog/drf/ Я перемещаю свой .bablr c и мой webpack.config. js в папку моего проекта root. Ранее это было в папке приложения внешнего интерфейса. Пожалуйста, дайте мне знать, что мне не хватает!

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

Ниже приведены мои файлы :

Мой webpack.config. js:

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

Мой пакет. json:

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

Мой .babel.r c:

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

Мое приложение. js:

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);

Answer 1

Для тех, у кого такая же проблема.

Вам необходимо иметь соответствующие загрузчики для 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"
        })
      ]
    };