django - 如何在 Django 中获得合适的加载程序来处理这种文件类型？

Question

我刚刚开始了一个 django 和 react 项目。每当我尝试加载一些 css 时，无论是纯 css 还是从引导程序加载，我都会收到以下错误：我按照以下教程进行操作：https : //www.valentinog.com/blog/drf/ 我移动了我的 .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

以下是我的文件：

我的 webpack.config.js：

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

我的 package.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.rc：

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

我的 App.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);

标签： djangoreactjswebpack

Answer 1

对于那些有同样问题的人。

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

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