javascript - Webpack/React - 不支持 URL 方案“webpack”

Question

我最近开始使用 Webpack 来设置我的 react 应用程序，但我遇到了一个我无法解决的问题。

我正在创建一个终端模拟。我有一个受控组件，因此我可以捕获用户输入，并据此在屏幕上呈现相关组件。

每次我通过在输入上键入命令来测试它时，都会出现以下错误：

我一直在尝试自己解决这个问题，但我是 Web 开发的新手，可能对正在发生的事情缺乏了解。非常感谢您对此事的任何帮助！

这是相关的代码片段。

处理输入.js

import { useState } from "react";

export default function HandleInput() {
const [values, setValues] = useState({
    userInput: "",
});

const [disabled, setDisabled] = useState(false);

const [blinking, setBlinking] = useState(false);

const [showComponent, setShowComponent] = useState(false);

const [showError, setShowError] = useState(false);

const [newInput, setNewInput] = useState(false);

const [errorHandling] = useState({
    message: "Command not found",
});

const [clear, setClear] = useState(false);

const handleChangeInput = (e) => {
    setBlinking(true);
    setValues({
        userInput: e.target.value.toLowerCase(),
    });
};

const manageInput = () => {
    switch (values.userInput) {
        case "help":
            setShowComponent(true);
            setShowError(false);
            break;
        case "ls":
            setShowComponent(true);
            setShowError(false);
        case "mkdir":
            setShowComponent(true);
            setShowError(false);
        case "clear":
            setShowComponent(true);
            setShowError(false);
        default:
            setShowComponent(false);
            setShowError(true);
    }
};

const handleClickInput = (e) => {
    e.preventDefault();
    setDisabled(true);
    setNewInput(true);
    manageInput();
};

return {
    values,
    setValues,
    disabled,
    setDisabled,
    blinking,
    setBlinking,
    errorHandling,
    handleChangeInput,
    handleClickInput,
    showComponent,
    setShowComponent,
    newInput,
    showError,
    setShowError,
    clear,
    setClear,
};
}

用户输入.js

import React from "react";
import HandleInput from "./HandleInput";
import Folder from "../Folder"
import { BsArrowRightShort } from "react-icons/bs";

export default function UserInput() {
const {
    values,
    blinking,
    disabled,
    handleChangeInput,
    handleClickInput,
    showComponent,
} = HandleInput();
return (
    <>
        <div className="form-container">
            <BsArrowRightShort className="arrow" />

            <p className="tilde"> ~ </p>
            <form onSubmit={(e) => handleClickInput(e)}>
                <input
                    autoFocus
                    className={!blinking ? "blinking" : "stop-blinking"}
                    value={values.userInput}
                    onChange={handleChangeInput}
                    disabled={!blinking ? disabled : disabled}
                />
            </form>
            {showComponent &&
            values.userInput === "ls" ?
                <Folder /> : null}
        </div>
    </>
);
}

最后是我的webpack.config.js

const path = require("path");

module.exports = {
mode: process.env.NODE_ENV,
output: {
    path: path.join(__dirname, "/dist"),
    filename: "index.bundle.js",
    publicPath: "/",
},
devServer: {
    port: 5000,
    contentBase: "./dist",
    historyApiFallback: true,
},
resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
},
module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
            },
        },
        {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
        },
    ],
},
};

标签： javascriptreactjswebpack