手动设置 webpack 的问题

Question

我决定将 create-react-app 更改为手动 webpack，但 npm 启动后路径出现问题。 我想我在某些文件中犯了错误，下面附上了代码。 你能告诉我我的错误是什么吗？

webpack.config.ts:

export default (env: BuildEnvProps): WebpackConfigurationProps => {
    const paths: BuildPathsProps = {
        entry: path.resolve(__dirname, 'src', 'index.tsx'),
        build: path.resolve(__dirname, 'build'),
        html: path.resolve(__dirname, 'public', 'index.html'),
    }

    const mode = env.mode || 'development'
    const isDev = mode === 'development'
    const PORT = env.port || 3000

    return {
        mode: mode,
        entry: paths.entry,
        output: {
            filename: '[name].[contenthash].js',
            path: paths.build,
            clean: true,
        },
        plugins: [
            new HTMLWebpackPlugin({
                template: paths.html,
            }),
            new webpack.ProgressPlugin(),
        ],
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: 'ts-loader',
                    exclude: /node_modules/,
                },
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader'],
                },
            ],
        },
        resolve: {
            extensions: ['.tsx', '.ts', '.js'],
        },
        devtool: isDev ? 'inline-source-map' : undefined,
        devServer: isDev
            ? {
                  port: PORT,
                  open: true,
              }
            : undefined,
        stats: { errorDetails: true },
    }
}

tsconfig.json:

{
    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "baseUrl": ".",
        "paths": {
            "*": ["./src/*"]
        },
        "esModuleInterop": true,
        "jsx": "react-jsx",
        "lib": ["dom", "dom.iterable", "esnext"], //+
        "module": "ESNext",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "strict": true, //+
        "target": "es6"
    },
    "include": ["./react-app-env.d.ts", "./src/**/*.ts", "./src/**/*.tsx"],
    "ts-node": {
        "compilerOptions": {
            "module": "CommonJS"
        }
    }
}

package.json:

{
    "name": "hse_portal_react",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@reduxjs/toolkit": "^1.6.1",
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "axios": "^0.21.4",
        "date-fns": "^2.25.0",
        "dom-to-image": "^2.6.0",
        "env-cmd": "^10.1.0",
        "framer-motion": "^4.1.17",
        "html-react-parser": "^1.4.14",
        "humps": "^2.0.1",
        "js-cookie": "^3.0.1",
        "js-file-download": "^0.4.12",
        "leaflet": "^1.7.1",
        "leaflet-draw": "^1.0.4",
        "lodash": "^4.17.21",
        "moment": "^2.29.1",
        "normalize.css": "^8.0.1",
        "query-string": "^7.1.1",
        "react": "^17.0.2",
        "react-datepicker": "^4.6.0",
        "react-dom": "^17.0.2",
        "react-dropzone": "^12.0.4",
        "react-helmet": "^6.1.0",
        "react-helmet-async": "^1.3.0",
        "react-hook-form": "^7.17.4",
        "react-input-mask": "^2.0.4",
        "react-leaflet": "^3.2.5",
        "react-leaflet-draw": "^0.19.8",
        "react-modal": "^3.14.4",
        "react-outside-click-handler": "^1.3.0",
        "react-redux": "^7.2.5",
        "react-router-dom": "^5.3.0",
        "react-select": "^5.2.1",
        "react-simple-line-icons": "^1.0.8",
        "react-tabs": "^3.2.3",
        "react-tiny-popover": "^7.0.1",
        "react-toastify": "^8.1.0",
        "react-tooltip": "^4.2.21",
        "schema-typed": "^2.0.2",
        "styled-components": "^5.3.1",
        "styled-react-modal": "^2.1.0",
        "use-query-params": "^1.2.3"
    },
    "devDependencies": {
        "@storybook/addon-actions": "^6.5.16",
        "@storybook/addon-essentials": "^6.5.16",
        "@storybook/addon-interactions": "^6.5.16",
        "@storybook/addon-links": "^6.5.16",
        "@storybook/builder-webpack5": "^6.5.16",
        "@storybook/manager-webpack5": "^6.5.16",
        "@storybook/node-logger": "^6.5.16",
        "@storybook/preset-create-react-app": "^4.1.2",
        "@storybook/react": "^6.5.16",
        "@storybook/testing-library": "^0.0.13",
        "@types/dom-to-image": "^2.6.4",
        "@types/humps": "^2.0.1",
        "@types/js-cookie": "^3.0.2",
        "@types/leaflet": "^1.7.8",
        "@types/lodash": "^4.14.179",
        "@types/lodash-es": "^4.17.6",
        "@types/node": "^17.0.21",
        "@types/react-datepicker": "^4.3.4",
        "@types/react-dom": "^18.0.6",
        "@types/react-input-mask": "^3.0.1",
        "@types/react-leaflet": "^2.8.2",
        "@types/react-modal": "^3.13.1",
        "@types/react-outside-click-handler": "^1.3.1",
        "@types/react-router-dom": "^5.3.3",
        "@types/react-tabs": "^2.3.4",
        "@types/react-window": "^1.8.5",
        "@types/styled-components": "^5.1.18",
        "@types/styled-react-modal": "^1.2.2",
        "@types/webpack": "^5.28.0",
        "@types/webpack-dev-server": "^4.7.2",
        "babel-plugin-named-exports-order": "^0.0.2",
        "css-loader": "^6.7.3",
        "eslint-config-prettier": "^8.3.0",
        "eslint-config-react-app": "^7.0.0",
        "eslint-plugin-prettier": "^4.0.0",
        "generate-react-cli": "^7.0.4",
        "html-webpack-plugin": "^5.5.0",
        "prettier": "^2.4.1",
        "prop-types": "^15.8.1",
        "style-loader": "^3.3.1",
        "ts-loader": "^9.2.6",
        "ts-node": "^10.5.0",
        "typescript": "^4.5.5",
        "webpack": "^5.69.1",
        "webpack-cli": "^5.0.1",
        "webpack-dev-server": "^4.7.4"
    },
    "scripts": {
        "start": "webpack serve --env port=3000",
        "build:prod": "webpack --env mode=production",
        "build:dev": "webpack --env mode=development",
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ],
    "homepage": "/portal_react",
    "eslintConfig": {
        "overrides": [
            {
                "files": [
                    "**/*.stories.*"
                ],
                "rules": {
                    "import/no-anonymous-default-export": "off"
                }
            }
        ]
    }
}

我想摆脱我的错误

我要改正我所有的错误